Live data from Hacker News

Chrome to get lazy load below-the-fold images and iframes

groups.google.com

1–10 of 69 posts

Re: Chrome to get lazy load below-the-fold images and iframes

#4
This feature seems to be involved. In order to layout the html page you need to know the image sizes(unless they are explicit), and for that you still need to download the image header, and the headers are of different sizes for different returned image formats. And some images change when you load them second time.

So it seems the only way to correctly implement that is to open a connection to load an image and stall it after receiving the content-type and appropriate image header and hope that the server will not close the hanging connection(?)

PS: Seems that chrome will download the first 2K if byte-ranges are supported. If there is no dimensions in the first 2kb or byte-ranges are not supported, the full image will be downloaded non-lazily https://docs.google.com/document/d/1691W7yFDI1FJv69N2MEtaSzp...

Re: Chrome to get lazy load below-the-fold images and iframes

#6
post #4

This feature seems to be involved. In order to layout the html page you need to know the image sizes(unless they are explicit), and for that you still need to download the image header, and the headers are of different sizes for different returned image formats. And some images change when you load them second time. So it seems the only way to correctly implement that is to open a connection to load an image and stal…

[deleted]

Re: Chrome to get lazy load below-the-fold images and iframes

#7
post #4

This feature seems to be involved. In order to layout the html page you need to know the image sizes(unless they are explicit), and for that you still need to download the image header, and the headers are of different sizes for different returned image formats. And some images change when you load them second time. So it seems the only way to correctly implement that is to open a connection to load an image and stal…

Not really .. you can just have the page / content duration bounce around a bit as you scroll down in rare cases where image size is dictating layout :/ .. we see that pretty frequently in post page display ad fill pushing thing around ( and in some cases ads loading when you scroll )

Re: Chrome to get lazy load below-the-fold images and iframes

#8
post #4

This feature seems to be involved. In order to layout the html page you need to know the image sizes(unless they are explicit), and for that you still need to download the image header, and the headers are of different sizes for different returned image formats. And some images change when you load them second time. So it seems the only way to correctly implement that is to open a connection to load an image and stal…

There's a link explaining how it's done!

It tries things in this order:

1. If the full image is present and fresh in the cache, then use that.

2. Otherwise, if the server supports range requests, and the image dimensions can be decoded from the first 2KB of the image, then generate and show an image placeholder with the same dimensions.

3. Otherwise, fetch the entire full image from the server as usual.

So, it'll only lazy-load images if it's in the cache or certain criteria is met. Also, it seems like it's opt-in using an attribute, so the implementer of the website can avoid it if they're worried. But overall, there won't be any reflow issues.

https://docs.google.com/document/d/1691W7yFDI1FJv69N2MEtaSzp...

Re: Chrome to get lazy load below-the-fold images and iframes

#9
post #5

How will this affect analytics with tracking pixels, etc?

They address this in the linked document, and note that if you’re depending on offscreen elements to load content from your server, that will no longer necessarily work.

Re: Chrome to get lazy load below-the-fold images and iframes

#10
post #4

This feature seems to be involved. In order to layout the html page you need to know the image sizes(unless they are explicit), and for that you still need to download the image header, and the headers are of different sizes for different returned image formats. And some images change when you load them second time. So it seems the only way to correctly implement that is to open a connection to load an image and stal…

There's a link explaining how it's done! It tries things in this order: 1. If the full image is present and fresh in the cache, then use that. 2. Otherwise, if the server supports range requests, and the image dimensions can be decoded from the first 2KB of the image, then generate and show an image placeholder with the same dimensions. 3. Otherwise, fetch the entire full image from the server as usual. So, it'll onl…

They note that Android battery saver may enable this by default unless the HTML specifically says otherwise. (Search for “or unset”.) Once they have enough data, perhaps in a year or two, it is likely they’ll extend that to all platforms for memory and battery life savings.
Post reply on HN