In this post, we’ll look at the new loading attribute which brings native img and iframe lazy-loading to the web! Web pages often contain a large number of images, which contribute to data-usage, page-bloat and how fast a page can load. By Addy Osmani, Engineering Manager at Google working on Chrome.
Many of these images are offscreen, requiring a user to scroll in order to view them. Historically, to limit the impact offscreen images have on page load times, developers have needed to use a JavaScript library (like LazySizes) in order to defer fetching these images until a user scrolls near them.
What if the browser could avoid loading these offscreen images for you? This would help content in the view-port load quicker, reduce overall network data usage and on lower-end devices, reduce memory usage. Well, I’m happy to share that this will soon be possible with the new loading attribute for images and iframes.
The article then goes and describes the loading attribute. The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. For details, including demo video follow the link to the original article. Nice one!
[Read More]