Principio de carga diferida
Una imagen es una etiqueta <img>. Si el navegador inicia una solicitud de una imagen se basa en el atributo src de <img>, por lo que la clave para la carga diferida es no dar el src de <img> cuando la imagen no ingrese al área visible Asigne un valor para que el navegador no envíe una solicitud, y luego asigne un valor a src después de que la imagen ingrese al área visible.
Hay cuatro pasos para realizar la carga diferida, de la siguiente manera:
1. Cargue la imagen de carga
2. Determine qué imágenes cargar [Clave]
3. Cargue las imágenes de forma invisible
4. Reemplazar la imagen real
A continuación, se muestran algunas funciones de la API:
El ancho del área visible de la página: document.body.clientWidth;
La altura del área visible de la página web: document.body.clientHeight;
El ancho del área visible de la página web: document.body.offsetWidth (incluido el ancho de la línea lateral);
La altura del área visible de la página web: document.body.offsetHeight (incluido el ancho de la línea lateral);
El ancho de texto completo del cuerpo de la página: document.body.scrollWidth;
La altura del texto completo del cuerpo de la página: document.body.scrollHeight;
La altura de la página que se desplaza: document.body.scrollTop;
La página se desplaza hacia la izquierda: document.body.scrollLeft;
En el cuerpo de la página: window.screenTop;
La parte izquierda del cuerpo de la página: window.screenLeft;
La altura de la resolución de la pantalla: window.screen.height;
El ancho de la resolución de la pantalla: window.screen.width;
La altura del área de trabajo disponible en la pantalla: window.screen.availHeight;
HTMLElement.offsetTop es una propiedad de solo lectura, que devuelve la distancia del elemento actual en relación con la parte superior de su elemento offsetParent.
window.innerHeight: la altura de la ventana del navegador (en píxeles); si hay una barra de desplazamiento horizontal, también se incluye la altura de la barra de desplazamiento
implementación del código js
// onload是等所有的资源文件加载完毕以后再绑定事件
window.onload = function(){
// 获取图片列表，即img标签列表
var imgs = document.querySelectorAll('img');
// 获取到浏览器顶部的距离
function getTop(e){
return e.offsetTop;
}
// 懒加载实现
function lazyload(imgs){
// 可视区域高度
var h = window.innerHeight;
//滚动区域高度
var s = document.documentElement.scrollTop || document.body.scrollTop;
for(var i=0;i<imgs.length;i++){
//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
if ((h+s)>getTop(imgs[i])) {
// 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s
(function(i){
setTimeout(function(){
// 不加立即执行函数i会等于9
// 隐形加载图片或其他资源，
//创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
var temp = new Image();
temp.src = imgs[i].getAttribute('data-src');//只会请求一次
// onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
temp.onload = function(){
// 获取自定义属性data-src，用真图片替换假图片
imgs[i].src = imgs[i].getAttribute('data-src')
}
},2000)
})(i)
}
}
}
lazyload(imgs);
// 滚屏函数
window.onscroll =function(){
lazyload(imgs);
}
}