A veces necesita obtener el tamaño de la imagen, que solo debe cargarse después de cargar la imagen. Encontrar el método?
1. Evento de carga
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> IMG - Evento de carga </title>
</ablo>
<Body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<P id = "P1"> Carga ... </p>
<script type = "text/javaScript">
img1.onload = function () {
p1.innerhtml = 'cargado'
}
</script>
</body>
</html>
Prueba, todos los navegadores muestran "cargados", lo que indica que todos los navegadores admiten el evento de carga IMG.
2. Evento ReadyStateChange
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> IMG - Evento ReadyStateChange </title>
</ablo>
<Body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<P id = "P1"> Carga ... </p>
<script type = "text/javaScript">
img1.onreadyStateChange = function () {
if (img1.readyState == "Complete" || img1.readyState == "Cargado") {
p1.innerhtml = 'ReadyStateChange: cargado'
}
}
</script>
</body>
</html>
ReadyState está completo y cargado, lo que significa que la imagen ha sido cargada. Probar que IE6-II10 admite este evento, pero otros navegadores no.
Iii. Atributo completo de IMG
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> IMG - Atributo completo </title>
</ablo>
<Body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<P id = "P1"> Carga ... </p>
<script type = "text/javaScript">
función imgload (img, devolución de llamada) {
VAR TIMER = SetInterval (function () {
if (img.complete) {
devolución de llamada (IMG)
ClearInterval (temporizador)
}
}, 50)
}
imgload (img1, function () {
p1.innerhtml ('cargado')
})
</script>
</body>
</html>
La encuesta monitorea continuamente el atributo completo de IMG. Si es cierto, significa que la imagen ha sido cargada y se detiene la encuesta. Esta propiedad es compatible con todos los navegadores.