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