How to Lazy load selected image using JavaScript

ByAnkush Jain| Last Updated On Saturday, Oct 16, 2021

JavaScript

You can use the below code to display the preview of a large-sized image when the user clicks on its thumbnail.

The code is self-explanatory.

// function to show loading spinner
var showloading = function() { ... };

// function to hide loading spinner
var hideloading = function() { ... };

// function to show error notification
var showError = function(message) { ... };

// invoke this method when user clicks on a thumbnail
var lazyLoadSelectedImage = function (imageUrl) {

    // show loading
    showloading();

    // create a JS object with Image type
    var img = new Image();

    // write an handler for load event
    img.onload = function () {

        // set the src of original image to this image url
        $("img#someId").attr('src', imageUrl);

        // hide loading
        hideloading();    
    };

    // write an handler for error event
    img.onerror = function () {

        // show error notification
        showError("Some error occured");

        // hide loading
        hideloading();
    };

    // finally set the selected image url
    img.src = imageUrl;
};

Also, while writing this blog, I got to know about this HTML loading Attribute tag as well. It looks interesting, just read about this.

Thank You 🙂 !!