Background load is not detected. Always calls the 'isLoaded' callback.

[WhereJuly]

Hello,

thanks for the great piece of the code of yours 💯

Though I found imagesloaded, while in the background mode does not detect if the image is loaded. Either it is or it is not, or even when the element does not have any background, the callback function signals in all the cases that the bg is loaded.

Here is the reduced test case on CodePen based on your recommended example.

Can you please kindly check and fix this or tell if I do something wrong?

Thanks again,
Val

[WhereJuly]

Well, after deeper look into the documentation I found the source of the issue.

The documentation is contradictory saying
Using a callback function is the same as binding it to the always event (see below). assuming that the callback is called in any case, either load was successful or not, and the example below saying #container background image loaded

// vanilla JS
imagesLoaded( '#container', { background: true }, function() {
  console.log('#container background image loaded');
});

Probably better to change the last phrase into something #container background image loading process ended with either success or fail

[WhereJuly]

Then there is still another issue when the pattern used in the documentation to detect the image is loaded

// vanilla JS
imgLoad.on( 'done', function( instance ) {
  console.log('DONE  - all images have been successfully loaded');
});

calls the done callback not only on actually successful image load but even when the element does not have any background set.

The test case is at the link in my first message here.

[desandro]

Thanks for reporting this issue. I'll have to take a look.

[Michas0206]

Same problem here. Why is it still not being fixed? This plugin is completely useless - it runs my function even if the picture is not loaded (or also if there is no picture at all or the complete div does not exist).

[shockthetoast]

I can confirm that this is not working for background images. It is triggering "done" long before the image actually loads. I am dynamically creating a number of DIVs and applying a "background-image" to each. If I use Chrome's developer tools to set "Fast 3G", there are a few seconds between "done" triggering and the images finishing to load/displaying.