Méthode javascript native pour implémenter le chargement différé des compétences images_javascript

L'exemple de cet article décrit comment implémenter le chargement différé des images à l'aide de javaScript natif. Le chargement différé des images a en fait un plug-in jquery, et la méthode de chargement est très simple et raisonnable. Cependant, certains amis ont estimé que le chargement du package de plug-in jquery était trop volumineux, alors Yu Shi en a écrit un lui-même et l'a partagé avec vous. .

Tout d'abord, le chargement différé des images peut économiser notre bande passante et offrir une meilleure expérience utilisateur, en particulier pour les sites contenant de nombreuses images. Ceci est très important. Discutons du principe et du code de mise en œuvre du chargement différé des images.

Principe du chargement différé des images

Le principe du chargement différé des images est que le src de l'image en HTML n'est pas la véritable adresse de l'image, mais l'adresse de l'image est attribuée à la balise img avec un attribut personnalisé, tel que : src="img/loading.gif " data-url="img/1.jpg", puis utilisez js pour déterminer l'événement de la barre de défilement du navigateur. Lorsque vous atteignez un certain point, attribuez l'adresse réelle de l'image dans l'attribut personnalisé au src de la balise img actuelle. , réalisant ainsi un spectacle de traitement d'image dynamique. Dans un projet réel, les adresses de ces images peuvent être transmises via ajax et attribuées aux attributs personnalisés de img.

Exemple de chargement différé d'images en utilisant du JS natif :

Le contenu du texte semble un peu ennuyeux après tout. J'ai écrit une démo simple et je publie maintenant tout le code. Les amis qui en ont besoin peuvent le copier directement et le comprendre après avoir regardé le code.

Copier le code Le code est le suivant :

希望本文所述对大家的javascript程序设计有所帮助。