Image & Iframe Lazy Loader With jQuery And IntersectionObserver - lazyload.js

File Size: 7.67 KB
Views Total: 3180
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Image & Iframe Lazy Loader With jQuery And IntersectionObserver - lazyload.js

This is the upgraded version of tuupola's lazy load plugin that allows you to smartly lazy load images, background images, and iframes (e.g. Youtube/Vimeo videos) using Intersection Observer API.

How to use it:

1. Download and include the lazyload.min.js script after jQuery library.

<script src="" 
<script src="lazyload.js"></script>

2. Embed images and iframe content to the page using the data-src attribute instead.

<img data-src="1.jpg" class="lazy">

<iframe data-src="" class="lazy" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

3. The plugin also supports responsive image delivery using the data-srcset attribute.

<img data-src="1.jpg" 
     data-srcset="small.png 200w,
                  full.png 400w"

4. Initialize the plugin and done.


5. Enable/disable the Intersection mode.

  allowIntersectionMode: true

6. Customize the placeholder image.

  placeholder     : "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

7. More useful settings for the lazy load functionality.


  // lazy load once the user has scrolled beyond a certain threshold
  threshold       : 0,

  // failure limit
  failure_limit   : 0,

  // trigger event
  event           : 'scroll',

  // where to track the trigger event
  container       : window,

  // skip invisible elements
  skip_invisible  : false,
  // x/y offsets
  pageXOffset: false,
  pageYOffset: false

This awesome jQuery plugin is developed by nechehin. For more Advanced Usages, please check the demo page or visit the official website.