How to check if the image is loaded or not on Webpage

If you have been using JavaScript, you might have run into something called Event Listeners. One of the events in the event listeners is the ‘load’ event which is fired immediately after the element, in which it is used, is loaded in the screen. This event listener can be used with tags like body, frame, frameset, iframe, img, input type = “image”, link, script, and style.

Instead of using load event listener, you can also use ‘onload’ attribute in the image tag, which performs the same function. This attribute can be used on all the tags in which load event listeners are used.

Here is a simple example that alerts “hello” to the user after the image is loaded.

Here is another example in which the preloader is closed after the image is loaded. The does not have to see the rendering image and instead see the complete rendered image instantly.

If you are curious if it also checks if the background-image of an HTML element is rendered or not, then the answer is no. You absolutely need the tags mentioned above to use the load event listener.

Hope this helped. Thanks for visiting.