Parfois, vous devez obtenir la taille de l'image, qui ne doit être chargée qu'après charger l'image. Trouver la méthode?
1. Événement de chargement
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> IMG - Événement de chargement </TITME>
</ head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> Chargement ... </p>
<script type = "text / javascript">
img1.onload = function () {
p1.innerhtml = 'chargé'
}
</cript>
</docy>
</html>
Test, tous les navigateurs affichent "chargé", indiquant que tous les navigateurs prennent en charge l'événement de charge IMG.
2. Événement ReadyStateChange
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> IMG - ReadyStateChange Event </Title>
</ head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> Chargement ... </p>
<script type = "text / javascript">
img1.onreadystatechange = function () {
if (img1.readystate == "complet" || img1.readystate == "chargé") {
p1.innerhtml = 'ReadyStateChange: chargé'
}
}
</cript>
</docy>
</html>
ReadyState est complet et chargé, ce qui signifie que l'image a été chargée. Test que IE6-IE10 prend en charge cet événement, mais les autres navigateurs ne le font pas.
Iii. L'attribut complet d'IMG
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> IMG - Attribut complet </TITME>
</ head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> Chargement ... </p>
<script type = "text / javascript">
fonction imgload (img, rappel) {
var timer = setInterval (function () {
if (img.comptete) {
rappel (IMG)
ClearInterval (temporisateur)
}
}, 50)
}
imgload (img1, function () {
p1.innerhtml («chargé»)
})
</cript>
</docy>
</html>
Le sondage surveille en permanence l'attribut complet de l'IMG. Si cela est vrai, cela signifie que l'image a été chargée et que le scrutin est arrêté. Cette propriété est prise en charge par tous les navigateurs.