Lazy Loading Of Images And Iframes Using IntersectionObserver – AyLazyLoader

Category: Javascript , Loading | April 29, 2021
Views Total:274 views
Official Page:Go to website
Last Update:April 29, 2021


Lazy Loading Of Images And Iframes Using IntersectionObserver – AyLazyLoader


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="">
<iframe class="lazy" style="width:100%;height:100%;" data-src="" 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">

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'


v1.0.2 (04/29/2021)

  • Added html picture tag support.

You Might Be Interested In:

Leave a Reply