Native Image Lazy Loading in Chrome Is Way Too Eager

For the Web Performance Calendar Advent, Aaron Peters took a close look at Chrome’s Native Lazy Image Loading, and noticed that it’s a bit too eager: I see the lazy-loaded images being fetched at ~ window.pageYOffset = 8500 on desktop and they become visible at ~ window.pageYOffset = 11500. So, the image lazy-load logic of […]

Native image lazy-loading for the web with [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 […]

Lazy Loading images with IntersectionObserver

Smashing 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 […]