Vanilla-lazyload: Fade-in: Non-background images stuck on "loading"

[brycewray]

Thanks for the great script! Giving it a try (wanting to move from a more well-known alternative) and really like the performance — but, after initial success, ran into a problem when trying the "fade-in" example from the recipes.

Problem

If I use the CSS from the fade-in example from the recipes, many if not most of my images are simply fading out or never appearing, with the data-ll-status stuck as "loading" rather than going to "loaded" as they should. For example, this "icon" from the footer:

<img src="/images/icons/GitHub_octocat_logo_blue_96x96.png" class="lazy loading" style="height: 48px; width: 48px;" alt="GitHub logo" data-ll-status="loading">

Please note that, although I see others have had a similar problem if using images as backgrounds, this is for non-background images.

Reproducing

Steps to reproduce the behavior:

1. Clone the repo branch https://github.com/brycewray/eleventy_solo/tree/verlok-lazyload-issue-20200520.
2. Un-comment the CSS at the end of /src/assets/css/index/css that's within the lines /* from vanilla-lazyload */ and /* end of CSS from vanilla-lazyload */.
3. Execute npm run start. (Give it a couple of minutes to create responsive images.)
4. In a browser, visit http://localhost:3000 and check the home page or any of the posts with body-section images (for example, http://localhost:3000/posts/2020/03/welcome-sweet-little-early-bird/). Note that the "hero image" doesn't appear (unless it’s given a hero class to override this), as do not the "icons" in the footer, since an inspection shows their data-ll-status never goes past loading — but the body-section images within the posts fade in and load as loaded, as all of them with the lazy class should.

Expected behavior

Based on the example in https://github.com/verlok/lazyload/blob/master/demos/fade_in.html, I would expect all images would fade in when in the viewport and reaching a data-ll-status of loaded. Instead, some never get past loading and thus either don't appear at all or fade out.

LazyLoad version

I am using LazyLoad 16.0.0, downloaded 2020-05-19.

Desktop

• OSs where observed: macOS, iOS, and Windows
• Browsers: Behavior is the same on all tested — Chromium-based (Chrome and Microsoft Edge), Firefox, and Safari (macOS/iOS).
• Versions: Latest of each.

Repo branch to check

https://github.com/brycewray/eleventy_solo/tree/verlok-lazyload-issue-20200520

[brycewray]

Would 16.1.0 fix this?

[verlok]

By @brycewray thank you for opening this.

From my experience I can try and guess why you get the sticky “loading” class on images.

Did you forget to set the elements_selector option?

If you did, you must know that the default value for that option is img and in that case an instance of LazyLoad would affect all of your images, including the non-lazy ones.

The fix I would suggest is to use the lazy class on the elements you want to LazyLoad and set the elements_selector option to .lazy.

Let me know how it goes!

[brycewray]

@verlok I checked and did set elements_selector to .lazy. But what I had not done was to make sure of two things:

1. Change the CSS from the example so that it referred to the .lazy class rather than img.
2. Make sure that all the images I tagged as .lazy had data-src= rather than just src=.

Once I fixed those issues, all worked well, including the nice, smooth fade effects. Again, many thanks for the excellent code! Am very happy to switch to it on my site.

[verlok]

I’m happy you solved and thank you for the tweets!

And in case you want to show some more appreciation, see #437

Have a great weekend!

[brycewray]

Done, gladly. :-)