lazyload

lazyload is a little bit of JavaScript (826 bytes) that tries to polyfill lazy loading support for <img> elements, <picture> elements, and CSS background images.

If lazy loading is natively supported already, lazyload will know and get out of the way.

Demo

https://theoutfit-lazyload.netlify.app/

How to Implement

1. Install it: npm i @theoutfit/lazyload --save
2. Import it: import lazyload from '@theoutfit/lazyload'
3. Call it: lazyload()
4. Adjust your code:
   • change every img element’s src attribute to data-lazy-src
   • change every img element’s srcset attribute to data-lazy-srcset
   • add a loading="lazy" attribute to every img element
   • add a lazy-bg class to every element with a background-image
   • add this rule to your CSS:

     .lazy-bg {
       background-image: none !important;
     }

License

Fadable is available under the MIT license.