Parfois, vous devez obtenir la taille de l'image, qui doit être chargée après le chargement de l'image. Ci-dessous, l'éditeur a compilé un résumé de plusieurs méthodes pour juger si une image JS est chargée. Jetons un coup d'œil.
1. Événement de chargement
<script type = "text / javascript"> $ ('img'). onload = function () {// code} </ script>Avantages: simple et facile à utiliser, sans affecter le code HTML.
Inconvénients: un seul élément peut être spécifié et le code javascipt doit être placé sous l'élément d'image
2. Méthode jQuery
<script type = "text / javascript"> $ (function () {$ ('. pic1'). Chaque (fonction () {$ (this) .load (function () {$ (this) .fadein ();});});}) </ script>Remarque qui ne lie pas l'événement de charge dans $ (document) .ready ().
Avantages: les événements d'élément peuvent être liés en lots et n'affectent pas le contenu du code HTML
Inconvénients: le support de la bibliothèque JQuery est nécessaire et le code doit être placé sous l'élément qui doit être utilisé.
3. Événement ReadyStateChange
<! Doctype html> <html> <ead> <meta charset = "utf -"> <itle> img - readystateChange Event </ title> </ head> <body> <img id = "img" src = "http://pic.win.com/wallpaper/f/cbbaea.jpg"> <p id = "p"> plier ... </cbbaea. type = "text / javascript"> img.onreadystatechange = function () {if (img.readystate == "complet" || img.readystate == "chargé") {p.innerhtml = 'ReadyStatechange: chargé'}} </cript> </ / body> </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.
4. L'attribut complet de IMG
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> IMG - Attribut complet </Title> </ head> <body> <img id = "img1" src = "http://pic1.win4000.com/wallpaper/f/51c3bb9a21ea.jpg"> <py id = "p1"> Chargement ... </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 ('chargé')}) </ script> </ body> </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.
Le contenu ci-dessus est un résumé de la méthode JS pour déterminer si l'image est chargée par l'éditeur. J'espère que ce sera utile à tout le monde. En même temps, je voudrais vous remercier beaucoup pour votre soutien au site Web du réseau Wulin!