Lazy Loading Of Images And Iframes Using IntersectionObserver – AyLazyLoader

Preview:

Description:

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

Click here to learn about the native lazy load.

How to use it:

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

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

Initialize the AyLazyLoader and you’re ready to go.

var lazyLoader = new AyLazyLoader();

Add the class="lazy" attribute to images and iframes and define the image/iframe sources in 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 to show the images immediately after loaded. Default: true.

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

Determine whether to automatically detect iframe content. Default: true.

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

Customize the CSS selector. Default: ‘.lazy’.

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

Define the rootMargin offsets.

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

Changelog:

v1.0.2 (04/29/2021)

• Added html picture tag support.