How to Lazy load selected image using JavaScript

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

JavaScript

Disclaimer: I am a consultant at Amazon Web Services, and this is my personal blog. The opinions expressed here are solely mine and do not reflect the views of Amazon Web Services (AWS). Any statements made should not be considered official endorsements or statements by AWS.

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 🙂 !!