https://twitter.com/addyosmani/status/1114777583302799360
We'll want to feature detect this using the code in Addy's blog post:
if ('loading' in HTMLImageElement.prototype) {
// Browser supports `loading`, don't setup IntersectionObserver
} else {
// Use existing IntersectionObserver code
}If lazy-loading exists, then we'll want to use it, if not, we'll continue to use our IntersectionObserver setup.
For images using the critical prop, we should use loading="eager" and for other images, we should use loading="lazy" — this should replicate our existing semantics.
<!-- Lazy-load an offscreen image when the user scrolls near it -->
<img src="unicorn.jpg" loading="lazy" alt=".."/>
<!-- Load an image right away instead of lazy-loading -->
<img src="unicorn.jpg" loading="eager" alt=".."/>
https://twitter.com/addyosmani/status/1114777583302799360
We'll want to feature detect this using the code in Addy's blog post:
If lazy-loading exists, then we'll want to use it, if not, we'll continue to use our IntersectionObserver setup.
For images using the
criticalprop, we should useloading="eager"and for other images, we should useloading="lazy"— this should replicate our existing semantics.