Chrome to get lazy load below-the-fold images and iframes
groups.google.com
Chrome to get lazy load below-the-fold images and iframes
1–10 of 69 posts
Re: Chrome to get lazy load below-the-fold images and iframes
#2Re: Chrome to get lazy load below-the-fold images and iframes
#3Also, do we yet unload images (from memory) after a user scrolls far past them?
I’m always surprised how slow “long” webpages become.
Re: Chrome to get lazy load below-the-fold images and iframes
#4So 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
#5Re: Chrome to get lazy load below-the-fold images and iframes
#6This 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…
Re: Chrome to get lazy load below-the-fold images and iframes
#7This 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…
Re: Chrome to get lazy load below-the-fold images and iframes
#8This 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…
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
#9How will this affect analytics with tracking pixels, etc?
Re: Chrome to get lazy load below-the-fold images and iframes
#10This 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…