Tiny Image Lazy Loader With Intersection Observer – Simply Lazy

Simply Lazy is a tiny lazy loader JavaScript library that uses Intersection Observer API to lazy load images.

How to use it:

1. Load the simplyLazy.min.js JavaScript library in the HTML document.

<script src="./dist/simplyLazy.min.js"></script>

2. Load the polyfill for Internet Explorer users. OPTIONAL.

<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>

3. Embed images into your document using the data-src attribute:

<img data-src="1.jpg" alt="Image 1" />
<img data-src="2.jpg" alt="Image 2" />
...

4. Enable the lazy loader on those images.

SimplyLazy({
  // options here
}).lazy('img');

5. Set the fallback image if the original image fails to load.

SimplyLazy({
  defaultImage: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
}).lazy('img');

6. Available callback functions.

SimplyLazy({
  onImageLoad: (imgEl) => {
    // do something
  },
  onImageError: (imgEl) => {
    // do something
  },
  allImagesFinished: () => {
    // do something
  },
}).lazy('img');

Changelog:

v1.1.0 (04/13/2021)

• Removing `allImagesFinished` callback for v1.1.0 as it needs some improvements and has a few edge cases where things don’t work