getdave / fetch-pjax

[BETA] Enables PJAX (PushState + Ajax) style navigation with the native Fetch API
Other
11 stars 1 forks source link

Wait for condition to be true before replacing the main content #2

Closed TobeyEh closed 4 years ago

TobeyEh commented 4 years ago

Hi Dave!

Thanks for your very nice library, it works like a charm! 😃 I don't know if you're still maintaining the library, nevertheless I'll try to ask.

Is there an option or callback to wait for some condition to be true, before applying the main content replace?

Although "skeleton screens" are the hottest **** right now, I'm trying to implement a loading animation. It should be visible until all of the "Pjaxed" images are loaded. I'm using the following code to check if all the images are loaded:

[].forEach.call(images, function(img) {
  img.onload = function() {
    amount--;
    if (amount === 0) {
      // Replace the main content here
      console.log("all images loaded, ready to replace the main content")
    }
  }
});

However, of course the library can't wait for the images to be loaded and then replace the content.

Is there maybe something like onBeforeRenderButWaitForSomethingToBeTrue = > X?

Could I store the main content temporarily in a DocumentFragment before and then wait for some condition to be true and then replace the main content with the DocumentFragment?

Or maybe I'm missing something?

Thanks again for the great library, it helped a lot!