Javascript Reference - HTML DOM Image complete Property

The complete property returns whether the browser is finished loading an image.

If the image is finished loading, the complete property returns true.

If the image is not finished loading, this property returns false.

Browser Support


`complete`	Yes	Yes	Yes	Yes	Yes

Syntax

var v = imageObject.complete

Return Value

A Boolean type value indicating whether the browser is finished loading the image.

Returns true if the loading is finished, otherwise it returns false.

Example

The following code shows how to check to see if the image is finished loading on body onload.


<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {<!-- w w w.j a  v  a  2 s . c om-->
    console.log("Image loaded: " + document.getElementById("myImg").complete);
}
</script>
</head>
<body onload="myFunction()">
<img id="myImg" src="http://java2s.com/style/demo/border.png" alt="test" width="100" height="100">
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to check to see if the image is finished loading.


<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="http://java2s.com/style/demo/border.png" alt="test" width="100" height="100">
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {<!--from   w  ww . jav a  2 s  . co  m-->
    var x = document.getElementById("myImg").complete;
    document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

The code above is rendered as follows: