How to check whether the background image is loaded or not using JavaScript ?

In this article, we will check whether the background image is loaded or not using JavaScript. In JavaScript, onload event is used to check whether a window is loaded or not. Similarly, we can use that event to check whether a particular element has loaded or not. There are two ways in which we can check whether a background image has loaded or not. 

We can do this in three ways:

• Using HTML
• Using the onload attribute in JavaScript
• Using addEventListener() method

Using HTML:

Syntax:

<element onload="myScript">

Example: This example checks whether the background image is loaded or not using Html.

Output:

Using onload attribute in JavaScript:

Syntax:

object.onload = function(){myScript};

Example: This example checks whether the background image is loaded or not using onload attribute in Javascript.

Output:

Using addEventListener() method in JavaScript

Syntax:

object.addEventListener("load", myScript);

Example: This example checks whether the background image is loaded or not using the addEventListener() method in Javascript.

Output:

Note: To use jQuery replace the event listener code with the following –

$("#bg_img").on("load", function () {
  window.alert("Image has loaded", 1);
});