A rather geeky/technical weblog, est. 2001, by Bramus
loading-attribute-eagle-polyfill
Today, Rick Viscomi noted that some sites have set eagle – instead of eager – as the value for Native Image Lazy-Loading: Native image lazy loading landed months ago in Chrome 76. You can set img[loading] to auto, lazy, or eager. According to @HTTPArchive, 34 websites are setting it to loading="eagle" 🤔 There's a Lord …
Continue reading “Native Image Lazy-Loading: loading-attribute-eagle-polyfill“
UPDATE 2020.07: the thresholds have been adjusted to be less eager: We’ve improved <img> lazy-loading in Chrome! https://t.co/zx8sf7I86L The new thresholds for when we load <img loading=lazy>: * Offer *much* better data-savings* Are closer to JavaScript lazy-loading libraries* Are rolling out to Chrome 79+ pic.twitter.com/3OHm2rnRAm — Addy Osmani (@addyosmani) July 17, 2020 For the Web …
Continue reading “Native Image Lazy Loading in Chrome Is Way Too Eager”
[loading="lazy"]Addy Osmani, on an upcoming web feature which is about to land in Chrome 75: The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. loading supports three values: lazy: is a good candidate for lazy loading. eager: is not a good candidate for lazy loading. Load …
Continue reading “Native image lazy-loading for the web with [loading="lazy"]“
IntersectionObserverSmashing Magazine has an extensive article on using the aforementioned IntersectionObserver to lazy load image assets on your page. The article first explains the difference between a regular Event and an Observer, before diving into the IntersectionObserver. const images = document.querySelectorAll('[data-src]'); const config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; let loaded …
Continue reading “Lazy Loading images with IntersectionObserver“