desandro / imagesloaded

:camera: JavaScript is all like "You images done yet or what?"
https://imagesloaded.desandro.com
MIT License
8.88k stars 1.15k forks source link

Some issues - #305

Open codyng opened 1 year ago

codyng commented 1 year ago

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

<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.