Cet article décrit la méthode de réalisation du chargement du retard d'image en JavaScript natif. Le chargement d'image retardé a en fait un plug-in jQuery, et la méthode de chargement est très simple et raisonnable. Cependant, certains amis pensent que le chargement du plug-in jQuery est trop grand, donc j'en ai écrit un seul pour le partager avec vous.
Tout d'abord, le chargement du retard d'image peut nous sauver la bande passante et obtenir une meilleure expérience utilisateur, en particulier pour les sites avec de nombreuses images, ce qui est crucial. Permettez-moi de discuter du principe et du code d'implémentation du chargement du retard d'image ci-dessous.
Principe de chargement de retard d'image
Le principe du chargement du retard d'image est que l'image SRC dans le HTML n'est pas remplie de l'adresse d'image réelle, mais l'adresse d'image est attribuée à la balise IMG avec un attribut personnalisé, tel que: src = ”IMG / Loading.gif” Data-URL = ”img / 1.jpg”, puis jugez l'événement Scrollbar du brunoir via JS. Lorsque vous atteignez un certain point, la véritable adresse de l'image dans l'attribut personnalisé est attribuée au SRC de la balise IMG actuelle, réalisant ainsi l'affichage dynamique de l'image. Dans les projets réels, les adresses de ces images peuvent être transmises par Ajax et affectées aux propriétés personnalisées de l'IMG.
Native JS implémente Exemple de chargement de retard d'image:
Le contenu texte semble un peu ennuyeux après tout. J'ai écrit une simple démo et publié maintenant tout le code. Les amis qui en ont besoin peuvent le copier directement, puis vous comprendrez après avoir regardé le code.
Copiez le code comme suit: <! Doctype html>
<html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8">
<Title> Chargement de retard d'image </TITAL>
<style>
IMG {affichage: bloc; largeur: 350px; hauteur: 245px; arrière-plan: URL (IMG / Loading.gif) centre central non répété}
</ style>
</ head>
<body>
<div id = "div">
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
<img src = "" data-url = "img / 11.jpg"> <br>
</div>
<script type = "text / javascript">
var obj = document.getElementById ("div"). GetElementsByTagName ("img"),
h = window.innerheight || document.DocumentElement.ClientHeight;
pour (var i = 0; i <obj.length; i ++) {
obj [i] .url = obj [i] .getAttribute ("data-url");
obj [i] .top = obj [i] .offsetTop;
obj [i] .flag = true; // Empêche le navigateur de charger l'image tout le temps, de sorte qu'après le chargement de l'image, l'image ne sera pas chargée lorsque le navigateur est défilé;
}
var fnload = fonction (obj) {
var t = document.body.scrolltop || document.DocumentElement.ScrollTop;
if (t + h> obj.top + 200 && obj.top> t) {// donne 200 pour améliorer l'état de chargement de l'utilisateur, il est plus convivial
setTimeout (function () {
obj.src = obj.url;
obj.flag = false;
}, 500)
}
}
window.onscroll = window.onload = function () {
pour (var i = 0; i <obj.length; i ++) {
if (obj [i] .flag) {
fnload (obj [i]);
}
}
}
</cript>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.