<!— Native lazy loading in action —> <img src=”/js-1x.png” srcset=”/js-1x.png 1x, /js-2x.png 2x” loading=”lazy”>
<iframe> elements. This is the
loading attribute. The
loading1 attribute takes three values:auto
does what browsers already do today. And, if browser heuristics are optimized in the future, they may intelligently defer the loading of assets depending on network conditions. - A setting ofeager
will ensure the content is loaded no matter what. - And a setting oflazy
—shown here—will ensure that the content is lazy loaded. When theloading
attribute is set tolazy` for images, Chrome will issue a range request for the first 2 KB of an image in order to render the dimensions of the element. Then, using an observer in the browser internals, the content is loaded as it approaches the viewport.