Este artículo describe el método para realizar la carga del retraso de la imagen en JavaScript nativo. La carga de imagen retrasada en realidad tiene un complemento jQuery, y el método de carga es muy simple y razonable. Sin embargo, algunos amigos piensan que cargar el paquete de complemento jQuery es demasiado grande, así que escribí uno solo para compartirlo con usted.
En primer lugar, la carga del retraso de la imagen puede ahorrarnos el ancho de banda de nosotros y obtener una mejor experiencia de usuario, especialmente para sitios con muchas imágenes, lo cual es crucial. Permítanme discutir el principio y el código de implementación de la carga de retraso de la imagen con usted a continuación.
Principio de carga de retraso de la imagen
El principio de la carga de retraso de la imagen es que la imagen SRC en el HTML no se llena en la dirección de imagen real, pero la dirección de la imagen se asigna a la etiqueta IMG con un atributo personalizado, como: src = "img/loading.gif" data-url = "img/1.jpg", y luego juzga el evento de barra de desplazamiento de navegadores a través de JS. Al llegar a un cierto punto, la dirección real de la imagen en el atributo personalizado se asigna al SRC de la etiqueta IMG actual, realizando así la visualización dinámica de la imagen. En proyectos reales, las direcciones de estas imágenes se pueden pasar a través de AJAX y asignadas a las propiedades personalizadas de IMG.
Ejemplo de carga de retraso de imagen nativo JS:
El contenido de texto se ve un poco aburrido después de todo. Escribí una demostración simple y ahora publico todo el código. Los amigos que lo necesitan pueden copiarlo directamente y luego lo entenderá después de mirar el código.
Copie el código de la siguiente manera: <! DocType Html>
<html>
<Evista>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> Carga de retraso de la imagen </title>
<estilo>
img {pantalla: bloque; ancho: 350px; altura: 245px; fondo: url (img/loading.gif) centro centro sin repetición}
</style>
</ablo>
<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;
para (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; // Evite que el navegador cargue la imagen todo el tiempo, de modo que después de que la imagen se cargue correctamente, la imagen no se cargará cuando el navegador se desplace;
}
var fnload = function (obj) {
var t = document.body.scrolltop || document.documentelement.scrolltop;
if (t+h> obj.top+200 && obj.top> t) {// dar 200 para mejorar el estado de carga del usuario, es más amigable
setTimeOut (function () {
obj.src = obj.url;
obj.flag = falso;
}, 500)
}
}
window.onscroll = window.onload = function () {
para (var i = 0; i <obj.length; i ++) {
if (obj [i] .flag) {
fnload (obj [i]);
}
}
}
</script>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.