-1

I have animated display ads, some of page elements are huge images provided in styles inside header of index.html as background-image: url('huge-image.png'); Is there any elegant method to prevent the execution of javascript animation library (greensock gsap) until all such assets will be displayed?

user2401543
  • 1,059
  • 11
  • 19
  • You can use onload attribute on body tag to call a function or you can use jQuery $(document).ready() function – Vinayak Aug 24 '20 at 09:13
  • @Vinayak - Does the window `load` event wait for **background** images? (`ready` **certainly** doesn't.) – T.J. Crowder Aug 24 '20 at 09:14
  • This post has relevant information about how you can do it https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t – Paloma Escribano Aug 24 '20 at 09:17
  • @PalomaEscribano - No, that doesn't wait for images (not even foreground ones, much less background ones). – T.J. Crowder Aug 24 '20 at 09:20
  • @Vinayak - It does look like `load` waits for background images. :-) – T.J. Crowder Aug 24 '20 at 09:25
  • Does this answer your question? [How can I check if a background image is loaded?](https://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded) – Zach Saucier Aug 24 '20 at 14:37

2 Answers2

-1

It looks like the window load event may wait for background images. The spec says it has to be fired after all dependent resources are loaded, and a quick experiment suggests that includes background images. So

window.addEventListener("load", function() {
    // All loaded now.
});

If I'm mistaken, though, here's a fallback:

I don't know if it's elegant, but since I can't find anything suggesting there's an event for a background image having loaded, you could use zero-height img elements with the same URLs and detect when those load; at that point, the image should be in cache and available to use as the background.

Assuming you have an array of the image names in imageNames:

let loaded = 0;
function imgLoadedOrFailed() {
    if (++loaded === imageNames.length) {
        // They're all loaded now!
    }
}
imageNames.forEach(name => {
    const img = document.createElement("img");
    img.onload = imgLoadedOrFailed;
    img.onerror = imgLoadedOrFailed;
    img.src = name;
});
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • @user2401543 - In what way? IE11 definitely has `forEach`. It doesn't have arrow functions if that's what you mean... – T.J. Crowder Apr 04 '21 at 10:45
-1

I think onload attribute on body tag can Help you

<body onload="fun()">

And then you can wrap up your javascript in the fun() function

function fun(){
 // Your Code goes here
}

Or in case it doesn't work

You can use setTimeout function to atleast wait for some time like about 10 seconds

Like this-

setTimeout(()=>{
 // Your Code goes here
}, 10000); // 10000 milliseconds = 10 seconds

I hope It Helped You

Vinayak
  • 80
  • 8
  • `load` does indeed look like it waits for background images. FWIW, though, I'd remove the `setTimeout`. For all you know, the images take more than five seconds to load. Race conditions like that are generally poor practice. – T.J. Crowder Aug 24 '20 at 09:26