Parfois, dans les travaux de développement frontal, afin d'obtenir des informations d'image, nous devons obtenir correctement la taille et la taille de l'image après le chargement de l'image et exécuter la fonction de rappel correspondante pour faire en sorte que l'image produise un certain effet d'affichage. Cet article organise principalement plusieurs méthodes courantes pour juger la fin de la charge d'image, et l'explique et l'explique à travers la combinaison du code et des applications pratiques.
Méthode Onload
Exécutez le code javascipt ultérieur en ajoutant un attribut onload à la balise IMG et en remplissant la fonction correspondante. Dans l'exemple de code suivant, l'élément IMG n'est pas affiché par défaut. Il est déterminé par Onload que l'image s'affiche une fois la charge terminée.
La copie de code est la suivante:
<img onload = "get (this)" src = "..." style = 'affiche: aucun' />
<script type = "text / javascript">
fonction get (ts) {
t.style.display = 'bloc'; // montre des photos
}
</cript>
Avantages: La section du code JavaScript peut être placée sur n'importe quelle partie de la page pour charger et peut être utilisée sur la plupart des images arbitraires. Il est relativement simple à utiliser et facile à comprendre.
Inconvénients: l'attribut OnLAOD doit être publié sur chaque balise, qui n'est pas applicable dans certains cas où le code HTML ne peut pas être directement manipulé ou si le code doit être simplifié.
Méthode native Javascipt
Sélectionnez l'image avec l'ID spécifié, spécifiez la méthode de rappel via Onload, et une invite avec le mot "Chargement d'image terminé" apparaît après le chargement de l'image.
La copie de code est la suivante:
<img id = "pic1" src = "..." />
<script linguisse = "javascript">
document.getElementById ("pic1"). onload = function () {
alert ("chargement d'image terminé");
}
</cript>
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
méthode jQuery
Pour chaque événement de liaison de l'élément d'image avec la classe PIC1, l'élément apparaît progressivement via la méthode de chargement de jQuery.
Remarque qui ne lie pas l'événement de charge dans $ (document) .ready ().
La copie de code est la suivante:
<script type = "text / javascript">
$ (function () {
$ ('. pic1'). Chaque (fonction () {
$ (this) .load (function () {
$ (this) .fadein ();
});
});
})
</cript>
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é.