什么是懒加载

懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数， 懒加载也叫延迟加载，延迟加载图片或符合某些条件时才加载某些图片。

懒加载的原理

只有img标签中的src写入了图片的地址，加载页面时才会请求图片，所以使用懒加载时在src中并不写入任何地址，把图片的真实地址放到data- (标签内部属性可存数据)属性中，在js中绑定鼠标滚动事件，其回调中遍历所有图片并作出判断，将出现在视口中的图片的 'data-' 属性保存的地址放到 'src' 中即可。

HTML

<h1>js懒加载</h1> 

 <div class="box">

<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/1.jpg">

 <img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/2.jpg">

 <img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/3.jpg"> 

 <img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/4.jpg">

 <img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/5.jpg"> 

 <img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/6.jpg">

<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/7.jpg"> 

 </div>

引入一堆图片src为空，地址写在data-original中，onerror表示当未加载图片时显示的临时加载页图片JavaScript

Script

window.onload = function () { //获取当前浏览器的视口高度 

 var viewHeight = document.documentElement.clientHeight; //鼠标滚动回调 

 function lazyload() { 

 var img = document.getElementsByClassName('img'); //获取所有图片集合 //遍历图片集合 

 for (let item of img) { //获取图片距视口顶部的距离 

 var imgHeight = item.getBoundingClientRect(); //判断当图片出现在视口160px时把地址放到src中，显示出图片 

 if (imgHeight.top < (viewHeight - 160)) { 

 item.src = item.getAttribute("data-original") 

             } 

       } 

 } 

 lazyload(); //页面加载时把当前视口中的图片加载进来 

 document.addEventListener('scroll', lazyload);}