🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A lazy load plugin that allows you to smartly lazy load images, background images, and iframes (e.g. Youtube/Vimeo videos) using Intersection Observer API.

lazy-load responsive-image

Documentation

lazyload

Javascript plugin for lazyload images and iframes. Fork of https://github.com/tuupola/jquery_lazyload , but with IntersectionObserver mode support . Support src, srcset attributes for image and src for iframe. Use it as data-src, data-srcset.

Install

Load as script in your HTML

Copy source to yout public dir and connect script in HTML page. Example:

<img data-src="https://via.placeholder.com/640x480?text=Lazy+image" class="lazy">  <iframe data-src="https://www.youtube.com/embed/9UkYhRXf5cg" class="lazy"          width="560" height="315" frameborder="0" allowfullscreen></iframe>  <!-- Load jquery, if not yet loaded --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- Load lazyload.js --> <script src="/js/lazyload.min.js"></script> <script>     $('.lazy').lazyload(); </script>

As NPM module

npm i @nechehin/lazyload

use:

import 'jquery'; import '@nechehin/lazyload';  jQuery(function() {     jQuery('.lazy').lazyload(); });

How to use

<img class="lazy" data-src="img/example.jpg" width="640" height="480">  <iframe data-src="https://www.youtube.com/embed/9UkYhRXf5cg" class="lazy"          width="560" height="315" frameborder="0" allowfullscreen></iframe>

then in your code do:

$(".lazy").lazyload();

You May Also Like