Skip to content

This fills a few gaps in image lazy-loading support; it covers the various ways you can use <img> elements, <picture> elements, and CSS background images … but it gets out of the way if the environment natively supports lazy-loading.

License

fromtheoutfit/lazyload

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

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.

About

This fills a few gaps in image lazy-loading support; it covers the various ways you can use <img> elements, <picture> elements, and CSS background images … but it gets out of the way if the environment natively supports lazy-loading.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published