Vanilla-lazyload: Compatibility with loading attribute

[ryuran]

Hello,

Addy Osmani, write here https://addyosmani.com/blog/lazy-loading/ about new loading attribute.

• Is it possible to use this module as "loading attribute" polyfill?
• If yes, how?
• If no, why and would it be in a future major release?

[verlok]

Hey @ryuran,
thank you for opening this.

I was already thinking about it... I don't think it's possible, because

<img src="celebration.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

I'm assuming that if the loading="lazy" is not supported by the browser, it would start loading all the images right away, even before the Javascript is downloaded and executed.

Anyway I'm going to read Addy's post through and see if it can be done somehow.

Thank you for the hint!

[verlok]

Hey, I've read Addy's article till the end, and YES, I think it's totally doable like he suggests, even if that solution means that your content would still rely on some JavaScript code to start loading. (so what’s the point?)

I'm going to add a new option, something like native_lazyload(*) so, when its value is true and the browser supports native lazy loading, this script will copy all the data- attributes to the proper ones.
It looks very easy to do. Will do this in version 12.

(*) big question: set the default value to true or false?

[Tabrisrp]

I lean forward true by default for the new option, since you'll check for browser support anyway

[szepeviktor]

@addyosmani Could you suggest a solution here?

[verlok]

I guess that since the native loading feature is still under development and will need some fine tuning, not only in Chrome but in all other browsers, that default value in LazyLoad will be false. At least in the first minor releases of version 12. That will assure nothing breaks for already working websites

[verlok]

If you want to take a look, I'm already developing it in the feature/nativeLazyLoading branch. ;)

[verlok]

I've added a new demo in the master branch, already deployed and made available online on my website, in order to test native lazy loading for images. This demo doesn't require any Javascript code, it's just to try how it works.

→ TRY IT NOW

As far as I can see, Chrome is downloading images all the way down even if the user didn't scroll by any pixel.

This is NOT the same goal that this script aims to pursue.

The main difference is that, using this LazyLoad script, the images outside of the viewport (plus the threshold size) are not downloaded at all.

So yes, I can continue developing this feature, but I think that in the end nobody would use it, since the final result would be very different.

What do you think?

[szepeviktor]

So scripted lazy loading is images outside of the viewport are not downloaded at all.
What does native lazy loading do actually?

[verlok]

Not sure. @addyosmani knows better I guess. Addy?

[Tabrisrp]

From the spec, the native lazy loading should

Allow browsers to defer the loading of out-of-view images and iframes until the user scrolls near it.

Also to note

An implementation detail of loading in Chrome is that it fetches the first 2KB of images on page-load. It fetches the rest of the image byes when the user is about to see them. This can result in (1) double fetches to 'appear' in the DevTools Network panel and (2) Resource Timing to have 2 requests for each image.

This is used to fetch the images dimensions and prevent any content reflow.

[verlok]

Thank you @Tabrisrp. That’s why then. The images in that demo are very light so... they are fetched all at once. Good to know! I’ll keep going with the implementation.

[verlok]

Just released 12.0 BETA.
Try it out on Chrome Canary!

[verlok]

You can install it locally via npm:

npm install [email protected]

Or include it in your page via script:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

[verlok]

https://www.andreaverlicchi.eu/native-lazy-loading-with-vanilla-lazyload/

[addyosmani]

Hey folks. Sorry for the slow reply here. I've been silently pushing updates to my article about how our current implementation in Chrome works. We're still in the process of figuring out a number of details and loading's behavior will likely settle in the next three weeks. A few specifics:

• We haven't yet decided on the default thresholds (i.e how near does the user need to be to an image for it to be fetched). This can impact how "many" images get fetched on page load vs lazy loaded. There's a big difference between some of the thresholds we're testing with (e.g 1px, which is what I think most folks would expect) and larger ranges that make it look like almost everything is still downloading.

• We have a number of edge cases we need to still implement solutions for. e.g our range-request implementation (basically, that 2KB fetch for dimensions) does not yet fully take dimensions into account and skip that fetch step if they've been supplied on image. There are lots of little things like that.

I would personally label any use of loading=lazy experimental for now. We're hoping if the rest of our tests against the feature go well that we'll be able to land it for either Chrome 75 (beta in May) or Chrome 76.

[verlok]

Thanks @addyosmani

I've also marked version 12 of this script as beta and made the feature active only under a setting (use_native) so the users can try and experiment with native lazy-loading without, well... breaking the internet.

Thanks!