Manchmal müssen Sie die Größe des Bildes erhalten, die nur nach dem Laden des Bildes geladen werden muss. Die Methode finden?
1. Ladenereignis
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> IMG - Ereignis laden </title>
</head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> Laden ... </p>
<script type = "text/javaScript">
img1.onload = function () {
p1.innerhtml = 'geladen' '
}
</script>
</body>
</html>
Test, alle Browser zeigen "geladen", was darauf hinweist, dass alle Browser das IMG -Lastereignis unterstützen.
2. Ereignis von ReadyStatechange
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> IMG - ReadyStatechange Ereignis </title>
</head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> Laden ... </p>
<script type = "text/javaScript">
img1.onreadyStatechange = function () {
if (img1.readystate == "complete" || img1.readystate == "geladen") {
p1.innerhtml = 'ReadyStatechange: geladen'
}
}
</script>
</body>
</html>
ReadyState ist vollständig und geladen, was bedeutet, dass das Bild geladen wurde. Testen, dass IE6-IE10 diese Veranstaltung unterstützt, andere Browser jedoch nicht.
III. Das vollständige Attribut von IMG
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> img - komplettes Attribut </title>
</head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> Laden ... </p>
<script type = "text/javaScript">
Funktion IMGLOAD (IMG, Rückruf) {
var timer = setInterval (function () {
if (img.com plete) {
Rückruf (IMG)
ClearInterval (Timer)
}
}, 50)
}
IMGLOAD (IMG1, FUNKTION () {
p1.innerhtml ('geladen')
})
</script>
</body>
</html>
Umfragen werden kontinuierlich das vollständige Attribut von IMG überwacht. Wenn es zutrifft, bedeutet dies, dass das Bild geladen wurde und die Umfrage gestoppt wird. Diese Eigenschaft wird von allen Browsern unterstützt.