DEV Community

Native lazy loading is landed in Chrome 🔥😍🔥

Yaser Adel Mehraban on August 25, 2019

Lazy loading resources is one of the important parts of web performance tuning, simply because offscreen resources can add a lot of weight to your ...
Collapse
 
ben profile image
Ben Halpern

Great writeup!

auto: Default behaviour of the browser, equal to not including the attribute.

I've had trouble being sure about this as written in different places. Is the auto value going to be as if this feature never existed or does it mean that the browser will choose the behavior and things still might be "lazier" than they had been in the past?

...does that question make sense?

I really really like this. DEV implemented this feature as soon as we possibly could.

I just did a quick pass to get it in some images, still need to go through more of the site and implement this in more places, especially with iframe embeds.

Collapse
 
yashints profile image
Yaser Adel Mehraban

Thanks Ben, the auto means you are delegating the responsibility to the browser. As I mentioned, each browsers has a different way of dealing with depriotising offscreen resources, so they will use it. Also if a browser doesn't have any strategy (which is possible) then it's equal to eager

Collapse
 
link2twenty profile image
Andrew Bone • Edited

Auto, for now, will be the same as eager but the browser makers will get to choose.

Indicates a preference for the user agent to determine the fetching strategy (the default)

github.com/whatwg/html/pull/3752/f...

Collapse
 
abraham profile image
Abraham Williams

'loading' in HTMLImageElement.prototype should always return true or false so you shouldn't need to then compare the result to true like in 'loading' in HTMLImageElement.prototype === true.

Collapse
 
dacko_m profile image
Dragan Malinović

Does this work with divs or other elements that have overflow:auto? Or just with scrolling the body element?

Or for example modals that are in dom and have images with lazy loading attribute, but are positioned outside the view and waiting to be shown with top:0 for example?

Collapse
 
yashints profile image
Yaser Adel Mehraban

Yes, for divs with overflow auto it will work fine. However, I am not too sure about Modals, have a look at the Distance Threshold to see how close to coming into viewport should the element be to trigger the request.

PS: If you gave it a shot for Modals, let me know and I'll update the article, that's a good one. I will try to test it myself later this week too

Collapse
 
rotemgrim profile image
Rotem Grimberg

what about images in backgrounds ?

Collapse
 
yashints profile image
Yaser Adel Mehraban

If you mean with CSS, that's not there yet as mentioned in the article