Às vezes, você precisa obter o tamanho da imagem, que só precisa ser carregada após o carregamento da imagem. Encontre o método?
1. Evento de carga
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> IMG - Evento de carregamento </title>
</head>
<Body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> carregando ... </p>
<script type = "text/javascript">
img1.onload = function () {
p1.innerhtml = 'carregado'
}
</script>
</body>
</html>
Teste, todos os navegadores mostram "carregado", indicando que todos os navegadores suportam o evento de carga IMG.
2. Evento ReadyStateChange
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> IMG - Evento ReadyStatechange </title>
</head>
<Body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> carregando ... </p>
<script type = "text/javascript">
img1.onReadyStateChange = function () {
if (img1.readyState == "complete" || img1.readyState == "carregado") {
p1.innerhtml = 'ReadyStateChange: carregado'
}
}
</script>
</body>
</html>
O ReadyState está completo e carregado, o que significa que a imagem foi carregada. Testar que o IE6-IE10 suporta este evento, mas outros navegadores não.
Iii. Atributo completo do IMG
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> img - atributo completo </ititle>
</head>
<Body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> carregando ... </p>
<script type = "text/javascript">
função imgload (img, retorno de chamada) {
var timer = setInterval (function () {
if (img.complete) {
retorno de chamada (IMG)
ClearInterval (timer)
}
}, 50)
}
imgload (img1, function () {
p1.innerhtml ('carregado')
})
</script>
</body>
</html>
A pesquisa monitora continuamente o atributo completo do IMG. Se for verdade, significa que a imagem foi carregada e a pesquisa é interrompida. Esta propriedade é suportada por todos os navegadores.