1

I want to know if the load event in js will wait until the background-image: url() in css is loaded completely.

What is the exact behaviour in this scenario?

Terminator
  • 53
  • 4
  • 1
    What do you try to do exactly ? – Lucien Dubois Feb 22 '19 at 04:23
  • I'm loading background-image in css and wait for load event. After the event is fired I take a page screenshot. But sometimes the image does not load completely. I want to know if the load event will wait for the background-image property. – Terminator Feb 22 '19 at 04:26
  • I'm actually using puppeteer tool for taking the screenshot. – Terminator Feb 22 '19 at 04:27
  • Possible duplicate of [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) – Ayush Srivastava Feb 22 '19 at 04:40
  • So Aysush, will load event wait for background-image? There is no proper documentation related to this. – Terminator Feb 22 '19 at 04:44

2 Answers2

0
$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
   $(this).remove(); // prevent memory leaks as @benweet suggested
   $('body').css('background-image', 'url(http://picture.de/image.png)');
});

try this

for more reference:-

How can I check if a background image is loaded?

Ayush Srivastava
  • 284
  • 3
  • 5
  • 17
-1

In your case, you should be sure that the page is 100% loaded.

For a simple and fast result, use jQuery:

$(window).on("load", function() {
    // Take the screenshot here.
});

Here is a demo: https://codepen.io/anon/pen/aXgdJq

Lucien Dubois
  • 1,590
  • 5
  • 28
  • 53
  • This is fine. But are you surr that the load will fire only after the background-image in css is loaded, not the one in . My question should actually be how to know if the background-image is loaded completely? – Terminator Feb 22 '19 at 04:35