Simple image lazy loading using JQuery

Lazy loading is a technique where images are given a placeholder to be displayed while the actual image is loading in the background. The placeholder gets replaced with the actual image once it's done loading in the background.



Below is a series of fully explained code on how to implement lazy loading

1. Set the src attribute of your image to be the placeholder image

<img src="placeholder.png"> 

1. Give your image tag an attribute ref-src to with the url of the actual image you want to load

<img src="placeholder.png" ref-src="https://cdn.pixabay.com/photo/2019/12/30/14/13/snail-4729777_960_720.jpg"> 

1. write some javascript code to load the image in background and replace the placeholder after image has been loaded

// selecting image element to be lazy loaded let elem = $("img"); //retrieving url from ref-data attribute let url = elem.attr("ref-data"); //creating a new image object let loadingImage = new Image(); //this function is called when the image object //is done loading it's image loadingImage.onload = function(){ //src attribute of elem is being replaced //with that of loadingImage because its done loading elem.attr("src", url); } //the url from elem has been assigned //to the new image object for loading  loadingImage.src = url; 

An with this code you've implemented lazy loading. These days most developers ignore the use of spinners as placeholders but rather prefer a grey looking shadow of the image.

Lazy loading all images on your site

To lazy load all images on your website, I have this simple script for you to use. Try understanding the code below because it's very similar to the one above.

let imgs = $("img"); for(let a=0;a<imgs.length;a++){ loadImage(imgs[a]); } function loadImage(elem){ let url = $(elem).attr("ref-src"); let newImg = new Image(); newImg.onload = function(){ console.log("done loading"); $(elem).attr("src", url); } newImg.src = url; } 

Voilà! all images on your site will be lazy loaded but remember to always put your placeholder in the src section and the image you want to load in the ref-src attribute like below

<img src="placeholder here" ref-src="actual image here">