DEV Community

Farhan Yahya
Farhan Yahya

Posted on • Originally published at doc-han.me

3

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">

Do your career a favor. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay