Lazy Loading Of Images And Iframes Using IntersectionObserver – AyLazyLoader

Category: Javascript , Loading | July 16, 2019
Author: fatihkizmaz
Views Total: 198
Official Page: Go to website
Last Update: July 16, 2019
License: MIT

Preview:

Lazy Loading Of Images And Iframes Using IntersectionObserver – AyLazyLoader

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>

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'
});

You Might Be Interested In:


Leave a Reply