You can detect support for the loading attribute to load lazysizes as a fallback library only when loading isn't supported


Fri Mar 04 2022 03:32:29 GMT+0000 (Coordinated Universal Time)

Saved by @mboljar #html

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =