A Simple, Lightweight Image Lazy Loader In Pure JavaScript

Simply Lazy is a simple and lightweight (0.6 KB) lazy uploader for pure JavaScript that works even in IE * and uses the Intersection Observer API to load lazy images.

lazy loading javascript on scroll example, lazy load pure javascript, lazy load images example, lazy loading javascript example, lazy load content on scroll

How to make use of it:

1. Load the simplyLazy.min.js JavaScript library within the HTML doc.

<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 pictures into your doc utilizing 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 these pictures.

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

5. Set the fallback picture if the unique picture fails to load.

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

6. Available callback features.

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

Tiny Image Lazy Loader With Intersection Observer, Simply Lazy Plugin/Github, lazy loading with blurred image effect, lazyload example, lazy loading intersection observer