desandro/imagesloaded

Some issues -

codyng opened this issue · 0 comments

Hi this is a great library however I have some problems with version 5.0.0:

  • progress event not fired, I can't trigger each image that is loaded.
  • broken link of CSS background image not trigger in fail event??
<div id="event-galleries-page">
    {{!-- Broken <img> for testing --}}
    <div class="grid-item bg t2">
        <div class="grid-item-img-container">
            <div class="grid-item-img">
                <img src="assets/images/dummy/event-galleries/12x.jpg">
            </div>
        </div>
    </div>
    {{!-- Broken CSS BG for testing --}}
    <div class="grid-item bg t2">
        <div class="grid-item-img-container">
            <div class="grid-item-img" style="background-image: url(assets/images/dummy/event-galleries/2x.jpg)"></div>
        </div>
    </div>
    <div class="grid-item bg t4">
        <div class="grid-item-img-container">
            <div class="grid-item-img" style="background-image: url(assets/images/dummy/event-galleries/11.jpg)"></div>
        </div>
    </div>
</div>
    const imgLoad = imagesloaded('#event-galleries-page', { background: true });
    imgLoad.on('always', ( instance ) => {
        console.log('all images loaded');
    });
    imgLoad.on('done', ( instance ) => {
        console.log('all images successfully loaded');
    });
    imgLoad.on('fail', ( ) => {
        console.log('all images loaded, at least one is broken');
    });
    imgLoad.on('progress', ( instance, image ) => {
        const result = image.isLoaded ? 'loaded' : 'broken';
        console.log( 'image is ' + result + ' for ' + image.img.src );
    });

From the above HTML code, when the broken JPG exists, the "always" event is not fired which is correct.
However when I took out it so that only all CSS background images are used, but only one CSS BG is broken, the fail event was not fired.

Screenshot 2022-08-10 at 01 16 04

And the progress event never got fired.

Hope someone can help.

Thanks.