Sometimes you need to get the size of the picture, which needs to be done after the picture is loaded.
First, the Load event
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>img-load event</title>
<body>
<p id= "P1" >loading...</p>
<script type= "Text/javascript" >
Img1.onload = function () {
p1.innerhtml = ' Loaded '
}
</script>
</body>
Test, all browsers display "loaded", which means that all browsers support the IMG Load event.
Ii. ReadyStateChange Incident
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>img-readystatechange event</title>
<body>
<p id= "P1" >loading...</p>
<script type= "Text/javascript" >
Img1.onreadystatechange = function () {
if (img1.readystate== "Complete" | | img1.readystate== "Loaded") {
p1.innerhtml = ' readystatechange:loaded '
}
}
</script>
</body>
ReadyState for complete and loaded indicates that the picture has been loaded. The test Ie6-ie10 supports this event and is not supported by other browsers.
Three, the complete attribute of img
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>img-complete attribute</title>
<body>
<p id= "P1" >loading...</p>
<script type= "Text/javascript" >
function Imgload (IMG, callback) {
var timer = setinterval (function () {
if (img.complete) {
Callback (IMG)
Clearinterval (timer)
}
}, 50)
}
Imgload (IMG1, function () {
P1.innerhtml (' loading complete ')
})
</script>
</body>
Polling constantly monitors the IMG complete property, and if True indicates that the picture has been loaded and stops polling. This property is supported by all browsers.
