Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compatibility with loading attribute #331

Closed
ryuran opened this Issue Apr 8, 2019 · 16 comments

Comments

Projects
None yet
5 participants
@ryuran
Copy link

ryuran commented Apr 8, 2019

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

This comment has been minimized.

Copy link
Owner

verlok commented Apr 8, 2019

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

This comment has been minimized.

Copy link
Owner

verlok commented Apr 8, 2019

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

This comment has been minimized.

Copy link

Tabrisrp commented Apr 8, 2019

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

@szepeviktor

This comment has been minimized.

Copy link

szepeviktor commented Apr 8, 2019

@addyosmani Could you suggest a solution here?

@verlok

This comment has been minimized.

Copy link
Owner

verlok commented Apr 9, 2019

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

This comment has been minimized.

Copy link
Owner

verlok commented Apr 9, 2019

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

@verlok verlok added STATUS: Doing and removed STATUS: To do labels Apr 9, 2019

@verlok

This comment has been minimized.

Copy link
Owner

verlok commented Apr 9, 2019

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.

Schermata 2019-04-09 alle 22 49 25

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

This comment has been minimized.

Copy link

szepeviktor commented Apr 9, 2019

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

@verlok

This comment has been minimized.

Copy link
Owner

verlok commented Apr 9, 2019

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

@Tabrisrp

This comment has been minimized.

Copy link

Tabrisrp commented Apr 10, 2019

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

This comment has been minimized.

Copy link
Owner

verlok commented Apr 10, 2019

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

This comment has been minimized.

Copy link
Owner

verlok commented Apr 11, 2019

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

@verlok verlok removed the STATUS: Doing label Apr 11, 2019

@verlok

This comment has been minimized.

Copy link
Owner

verlok commented Apr 11, 2019

You can install it locally via npm:

npm install vanilla-lazyload@12.0.0-beta.0

Or include it in your page via script:

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0-beta.0/dist/lazyload.min.js"></script>
@verlok

This comment has been minimized.

@verlok verlok closed this Apr 11, 2019

@addyosmani

This comment has been minimized.

Copy link

addyosmani commented Apr 12, 2019

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

This comment has been minimized.

Copy link
Owner

verlok commented Apr 12, 2019

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.