How to Check If a Background Image Is Loaded

How can I check if a background image is loaded?

try this:

$('<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)');
});

this will create a new image in memory and use load event to detect when the src is loaded.

EDIT: in Vanilla JavaScript it can look like this:

var src = 'http://picture.de/image.png';
var image = new Image();
image.addEventListener('load', function() {
   body.style.backgroundImage = 'url(' + src + ')';
});
image.src = src;

it can be abstracted into handy function that return a promise:

function load(src) {
    return new Promise((resolve, reject) => {
        const image = new Image();
        image.addEventListener('load', resolve);
        image.addEventListener('error', reject);
        image.src = src;
    });
}

const image = 'http://placekitten.com/200/300';
load(image).then(() => {
   body.style.backgroundImage = `url(${image})`;
});

How can I tell when a CSS background image has loaded? Is an event fired?

You could load the same image using the DOM / a hidden image and bind to the load event on that. The browser's caching should take care of not loading the image twice, and if the image is already loaded the event should fire immediately... not tested, tough.

How to verify background (css) image was loaded?

The only way I know of to do this is to load the image using Javascript, and then set that image as the backgroud.

For example:

var bgImg = new Image();
bgImg.onload = function(){
   myDiv.style.backgroundImage = 'url(' + bgImg.src + ')';
};
bgImg.src = imageLocation;

Monitoring background image load pure javascript

I would do something like this (untested):

function BackgroundLoader(url, seconds, success, failure) {
  var loaded = false;
  var image = new Image();

  // this will occur when the image is successfully loaded
  // no matter if seconds past
  image.onload = function () {
    loaded = true;
    var div = document.getElementById("dk");
    div.style.backgroundImage = "url('" + url + "')";
  }
  image.src = url;      

  setTimeout(function() {
    // if when the time has passed image.onload had already occurred, 
    // run success()
    if (loaded)
      success();
    else
      failure();
  }, seconds * 1000);

}

and then use it:

<div id="dk"></div>
<script>
  function onSuccess() { /* do stuff */ }
  function onFailure() { /* do stuff */ }
  BackgroundLoader('d.jpg', 5, onSuccess, onFailure);
</script>

How to show the page when background image fully loaded?

See this answer. Basically, you cannot detect the load event of a background image (it's supposed to happen in the background!) so you load the image using the image element, and then once it is loaded (and assumably cached in the browser) you set it to be the background image for the body.

How to check if background img failed to load?

I don't know if there is a way to check given url exists with client side javascript. But you can try this trick.

    <!DOCTYPE html>    <html>    <head>     <title></title>    </head>    <body>
    <div id="mydiv" style="background-image:url('foo.png')">      <img id="foo_img" src="foo.png" style="display:none;">            <p>Status:<span id="result"></span></p>    </div>
    </body>    <script type="text/javascript">    var imgtowatch = document.getElementById("foo_img");    var events = ["load", "error"];
    events.forEach(function(ev){    imgtowatch.addEventListener(ev, function(){      document.getElementById("result").innerHTML = ev;    });    });    </script>    </html>

How to check when image is loaded as a background image?

You can select the element containing the data-image, and make your jquery code run after that element has loaded with the function 'complete'.

For example:

if ($("#image").complete) { yourFunction(); }

Now in your code, you want to execute the code after a css change (an animation). You could use a promise with a callback - look here

In your case:

if (typeof src !== "undefined" && src != "") {
            // Set as background image
            $this.css('background', 'url(' + src + ')').promise().done(function(){
                  jQuery('#loadingsvg').fadeOut();;
});

Or, a less elegant solution: you can add a timeout before you fade out, like this:

setTimeout(function(){jQuery('#loadingsvg').fadeOut();}, 1000);

How Can I Tell If a Background-Image Loaded Successfully ... AFTER The Fact?

Puppeteer has a config for pages to check the number of idle connections. So the images should be loaded while there are no more requests than specified in 500ms.

await page.goto('https://www.google.com/', {"waitUntil" : "networkidle0"});