AyLazyLoader is a lazy JavaScript loader plugin for lazy loading images and iframes based on IntersectionObserver. Automatically detects lazy items from Ajax orders. Supports srcset properties and sizes for images.

AyLazyLoader is a native lazy JavaScript loader for the slow loading of images, iframes, and AJAX content based on the Intersection Observer API.

How to make use of it:

Insert the script ay-lazy-loader.min.js into the HTML doc.

<script src="./dist/ay-lazy-loader.min.js"></script>

Initialize the AyLazyLoader and also you’re able to go.

var lazyLoader = new AyLazyLoader();

Add the class="lazy" attribute to photographs and iframes and outline the picture/iframe sources within the data-src attribute as follows:

<img class="lazy" data-src="https://source.unsplash.com/lSXpV8bDeMA/800x600">
<iframe class="lazy" style="width:100%;height:100%;" data-src="https://www.youtube.com/embed/qIbQqf369QI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<picture class="lazy">
  <source data-srcset="sun-320x320.jpg" media="(max-width: 320px)">
  <source data-srcset="sun-480x480.jpg" media="(min-width: 320.1px) and (max-width: 480px)">
  <source data-srcset="sun-720x720.jpg" media="(min-width: 480.1px) and (max-width: 720px)">
  <source data-srcset="sun-800x600.jpg" media="(min-width: 720.1px)">
  <img data-src="sun.jpg">
</picture>

Determine whether or not to point out the photographs instantly after they loaded.

var lazyLoader = new AyLazyLoader({
    showImagesAfterLoaded: false
});

Determine whether or not to mechanically detect iframe content material.

var lazyLoader = new AyLazyLoader({
    autoDetectItemsFromAjaxRequests: false
});

Customize the CSS selector.

var lazyLoader = new AyLazyLoader({
    selectorClass: '.myClass'
});

Define the rootMargin offsets.

var lazyLoader = new AyLazyLoader({
    rootMargin: '200px 20px 200px 20px'
});

Lazy Loading Of Images And Iframes Using IntersectionObserver, AyLazyLoader Plugin/Github, lazy load background images, image loading attribute

See Demo And Download

Official Website(fatihkizmaz): Click Here

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