THEMETRIAL

Lazy Loading Of Images And Iframes Using IntersectionObserver – AyLazyLoader

Author:fatihkizmaz
Views Total:0 views
Official Page:Go to website
Last Update:April 29, 2021
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="https://www.cssscript.com/./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="https://www.cssscript.com/sun-320x320.jpg" media="(max-width: 320px)">
  <source data-srcset="https://www.cssscript.com/sun-480x480.jpg" media="(min-width: 320.1px) and (max-width: 480px)">
  <source data-srcset="https://www.cssscript.com/sun-720x720.jpg" media="(min-width: 480.1px) and (max-width: 720px)">
  <source data-srcset="https://www.cssscript.com/sun-800x600.jpg" media="(min-width: 720.1px)">
  <img data-src="https://www.cssscript.com/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.

Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.