3 façons d'utiliser JavaScript pour déterminer si une image a été chargée_javascript skills

Parfois, dans le travail de développement front-end, afin d'obtenir des informations sur l'image, nous devons obtenir correctement la taille de l'image après le chargement de l'image et exécuter la fonction de rappel correspondante pour produire un certain effet d'affichage pour l'image. Cet article trie principalement plusieurs méthodes JavaScript courantes pour juger du moment où une image est chargée et l'explique à travers une combinaison de code et d'applications pratiques.

méthode de chargement

Exécutez le code javascipt suivant en ajoutant l'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. Onload est utilisé pour déterminer que l'image est affichée une fois le chargement terminé.

Copier le code Le code est le suivant :

Avantages : La partie du code javascript peut être placée dans n'importe quelle partie de la page à charger et peut être utilisée sur la plupart des images. Il est relativement simple à utiliser et facile à comprendre.

Inconvénients : L'attribut onlaod doit être apposé sur chaque balise, ce qui n'est pas applicable dans certaines situations où le code HTML ne peut pas être directement manipulé ou où une simplification du code est requise

Méthode native javascipt

Sélectionnez l'image avec l'ID spécifié et spécifiez la méthode de rappel via onload. Une fois l'image chargée, une invite avec les mots « Chargement de l'image terminé » apparaîtra.

Copier le code Le code est le suivant :

Document.getElementById("pic1").onload = function () {
alert("Chargement de l'image terminé");
>

Avantages : Simple et facile à utiliser, n’affecte pas le code HTML.

Inconvénients : Un seul élément peut être spécifié, et le code javascipt doit être placé sous l'élément image

Méthode jquery

Liez un événement à chaque élément d'image avec la classe pic1 et utilisez la méthode de chargement de jquery pour révéler progressivement l'élément.

Remarque, ne liez pas l'événement de chargement dans $(document).ready().

Copier le code Le code est le suivant :

Avantages : Les événements d'éléments peuvent être liés par lots sans affecter le contenu du code HTML

Inconvénients : Il nécessite le support de la bibliothèque jquery et le code doit être placé sous les éléments qui doivent être exploités.