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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<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="https://www.youtube.com/embed/WOQC8ETeTVM" 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"
     class="lazy">

4. Initialize the plugin and done.

$('.lazy').lazyload();

5. Enable/disable the Intersection mode.

$('.lazy').lazyload({
  allowIntersectionMode: true
});

6. Customize the placeholder image.

$('.lazy').lazyload({
  placeholder     : "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
});

7. More useful settings for the lazy load functionality.

$('.lazy').lazyload({

  // 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.