Press "Enter" to skip to content

A Simple, Lightweight Image Lazy Loader In Pure JavaScript | Simply Lazy

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

Simply-Lazy-Demo


See Demo And Download

Official Website(maxshuty): Click Here

This superior jQuery/javascript plugin is developed by maxshuty. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.