Image lazy loading using JS, improve your website speed.
Lazy loading images JavaScript
Background-image lazy load
Lazy load images jQuery
Piece of html code
// jquery librabray <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="lazy" data-src="http://example.com/image.png" /> <img class="lazy" data-src="http://example.com/image.png" /> <img class="lazy" data-src="http://example.com/image.png" /> <img class="lazy" data-src="http://example.com/image.png" />
jQuery code
setTimeout(function() { lazyLoadImages( $('.lazy') ); }, 100); var setImageSrcFromDataAttribute = function( imageElement ) { let imageUrl = imageElement.data( 'src' ); imageElement.attr('src', imageUrl); } var lazyLoadImages = function( imageElements ) { imageElements.each( function() { setImageSrcFromDataAttribute( $( this ) ); }); }
Javascript code
// for the lazy load document.addEventListener("DOMContentLoaded", function() { var lazyloadImages = document.querySelectorAll("img.lazy"); var lazyloadThrottleTimeout; function lazyload () { if(lazyloadThrottleTimeout) { clearTimeout(lazyloadThrottleTimeout); } lazyloadThrottleTimeout = setTimeout(function() { var scrollTop = window.pageYOffset; lazyloadImages.forEach(function(img) { if(img.offsetTop < (window.innerHeight + scrollTop)) { img.src = img.dataset.src; img.classList.remove('lazy'); } }); if(lazyloadImages.length == 0) { document.removeEventListener("scroll", lazyload); window.removeEventListener("resize", lazyload); window.removeEventListener("orientationChange", lazyload); } }, 20); } document.addEventListener("scroll", lazyload); window.addEventListener("resize", lazyload); window.addEventListener("orientationChange", lazyload); });
Image Lazy laod full exmaple using Javascript
<<!DOCTYPE html> <html> <body> <img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" /> <img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" /> <img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" /> <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" /> <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image5.jpeg?tr=w-400,h-300" /> <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image6.jpeg?tr=w-400,h-300" /> <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image7.jpeg?tr=w-400,h-300" /> <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image8.jpeg?tr=w-400,h-300" /> <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image9.jpeg?tr=w-400,h-300" /> <img class="lazy" data-src="https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-400,h-300" /> </body> </html> <style type="text/css"> img { background: #F1F1FA; width: 400px; height: 300px; display: block; margin: 10px auto; border: 0; } </style> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { var lazyloadImages = document.querySelectorAll("img.lazy"); var lazyloadThrottleTimeout; function lazyload () { if(lazyloadThrottleTimeout) { clearTimeout(lazyloadThrottleTimeout); } lazyloadThrottleTimeout = setTimeout(function() { var scrollTop = window.pageYOffset; lazyloadImages.forEach(function(img) { if(img.offsetTop < (window.innerHeight + scrollTop)) { img.src = img.dataset.src; img.classList.remove('lazy'); } }); if(lazyloadImages.length == 0) { document.removeEventListener("scroll", lazyload); window.removeEventListener("resize", lazyload); window.removeEventListener("orientationChange", lazyload); } }, 20); } document.addEventListener("scroll", lazyload); window.addEventListener("resize", lazyload); window.addEventListener("orientationChange", lazyload); }); </script>
Image lazy loading using JS
Related Post Add class or attribute in jQueryAdd class or attribute in jQuery