Images requesting multiple times on Safari ver 14.0.2

[danielLee0721]

First of all - amazing script! This must have been a lot of work creating it and now maintaining it!!

Describe the bug I just tried the following example https://www.andreaverlicchi.eu/vanilla-lazyload/demos/background_images.html on macOS Big Sur Safari ver 14.0.2, and it seems to be loading duplicates of every img.

To Reproduce Steps to reproduce the behavior: Use the following example on safari browser 14.0.2 https://www.andreaverlicchi.eu/vanilla-lazyload/demos/background_images.html

LazyLoad version I am using vanilla-lazyload ver 17.3.0.

Desktop (please complete the following information): OS: macOS Big Sur Browser: Safari 14.0.2

Additional context Please find attached screenshot.

I may be interpreting it wrong though. Any help would be greatly appreciated.

Thank you!

[Yinci]

I have a similar issue. In my case, an image is not available (moved or deleted), after which the images fails to load, but then retries anyway. This causes a lot of network traffic, even though it obviously can't load.

Also running 17.3.0, with macOS Catalina (10.15.5), Safari 13.1.1

EDIT: In my case I have noticed weird behaviour regarding a given exited class, and actually not specific to Safari; If an image fails to load, class error is given, but if one scrolls away (or have a carousel slider) from a given image, it moves from loading to exited, but then retries after going into view again. The time it takes to error is quite long. In my case it is about 1 minute.

Every time I do this, a new request gets sent to the server. The server attempts to handle them all, and in turn takes up a ton of memory, up to the point where the page cannot be loaded anymore, effectively causing a DoS on itself.

I have used a 'dirty' fix, which basically replaces the image upon it receiving the exited tag:

$(document).ready(function() {
    let config = { attributes: true, childList: true, characterData: true };

    $('img.lazy').each(function() {
        let target = this;
        let observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                let jel = $(mutation.target);
                if (jel.hasClass('exited')) {
                    jel.replaceWith('<img src="{SOURCE}" alt="{ALT}" class="img-fluid">');
                }
            });
        });

        observer.observe(target, config);
    })
});

My testing has showed that this stops the lazy load making new requests. I originally planned on just applying the loaded class, but lazy load has a memory it seems, because even if it has the class, the data-ll-status and the src tag, it would still update and re-load.

I know that this fix for this particular issue probably isn't the best, so I'm open to suggestions or other fixes. Also, apologies if this is not relevant to the current issue.

[zapatoche]

I had a similar issue and it was driving me crazy until a colleague pointed to me that caching was disabled when the dev tools are open. Maybe it's a similar issue 🤞. I'm much 😃now.

[danielLee0721]

I had a similar issue and it was driving me crazy until a colleague pointed to me that caching was disabled when the dev tools are open. Maybe it's a similar issue 🤞. I'm much 😃now.

Thanks for the suggestion! I will give it a try!

[verlok]

Hi @danielLee0721, I assume you'll have solved your issue by now.

Let me close this. Feel free to reopen if you still need help.