Vanilla-lazyload: data-ll-status stay on "loading" for data-bg images

[MrPropre]

Describe the bug
For background-images, data-ll-status attribute stay on "loading" and never on "loaded", while background images are loaded.

To Reproduce
Steps to reproduce the behavior:

1. Create element with data-bg attribute
2. Look at the Dev Tools and check the data-ll-status attribute

Expected behavior
The data-ll-status attribute should have "loaded" value when background image has been loaded.

LazyLoad version

• Version 14.0.0

Desktop:

• OS: Windows
• Browser Chrome
• Version 80

Additional context
It was working on 13.x version of lazyload

[verlok]

Hey @PropreCity ,
thank you for opening this.

This issue has been opened so many times that you made me realise it's time to add the reply to a FAQ section in the README file... or to add this feature in LazyLoad's code :)

Replies to previously opened and closes issues:

--- #90

In Javascript, there aren't "loaded" events fired wen setting background images. Therefore, LazyLoad can't neither call the callback_load nor remove the loading class.
Since you're using background images instead of regular images, there's no way to fix this. I'd suggest to use the good old img tag instead.
Please note that this has always been like that, it's not a regression bug, it's simply a Javascript limitation.

--- #151

The reason why my script doesn't do anything when a background image is loaded is because there is no way to know when a background image is loaded in Javascript. Browsers simply won't fire any event or call any callback when a background image is loaded, and they don't because background images are meant for decorative purposes only, they could be removed from the page and nobody would care.

And this closes the issue (there are other similar issues already closed, I guess).

But from the way you are putting it, it looks like the images you're loading lazily are not just decorative images, but they are meaningful content instead. If they are meaningful content, you should really think again and use the img tag instead. If you used it, you could:

• know when the images are loaded (and having the "loading" class removed by the script)
• benefit from SEO since crawlers would index your images and your alt text content
• help visually impaired users read your images through assistive technology

So I'd strongly advice to use real images with the img tag instead of background images, if your images are meaningful content.

--- #199

Here's workaround to make it work without changing the library code.

new LazyLoad({
    elements_selector: "a",
    callback_enter: function (element) {
        function callback_load(event) {
            element.classList.remove('loading');
            logElementEvent("LOADED", element);
            imageFragment.removeEventListener('load', callback_load);
        }
        var imageFragment = createImageFragment(element.getAttribute('data-src'));
        imageFragment.addEventListener('load', callback_load);
        element.classList.add('loading');
        logElementEvent("ENTERED", element);
    },
    callback_set: function (element) {
        logElementEvent("SET", element);
    },
    callback_error: function(element) {
        logElementEvent("ERROR", element);
        element.src = "https://placeholdit.imgix.net/~text?txtsize=21&txt=Fallback%20image&w=220&h=280";
    }
});

---

I declared to be open to a PR to fix that, but until today I didn't receive any.
I could work on a solution in the future versions, though.

[verlok]

@PropreCity you don't know what you've triggered. I'm refactoring and creating v. 15 💃
The new version will have this fixed, AND the ability to mark background images as loaded / errored when possible.
Stay tuned.

[MrPropre]

@verlok I will try to use img tag as much as possible. But it could be very cool to have this fix because I want to add a fadeIn animation on background images, when they finish loading. Thank you very much for this future version of lazyload!

[verlok]

I’m working on it on this branch: https://github.com/verlok/lazyload/tree/feature/watchOnBgLoadEvent/

It’s almost done! If you want to give it a try before it’s released, download that branch and npm install + npm run build it

[verlok]

Released a fix in v15. Please read the CHANGELOG because it introduced a breaking change on the data-bg usage. Let me know how it works for you!

[MrPropre]

@verlok It works perfectly !!! The fadeIn animation for background images is beautiful now ! Thank you

[verlok]

I'm glad you solved!
I hope animations look so beautiful that I deserve a coffee 😅