图片懒加载
1、场景：
一个网页如果包含了很多的图片，那么，服务器压力就会很大。不仅影响渲染速度还会浪费带宽。
通俗的说：你不看的图片我先不加载，也许你不看呢（哈哈），我何苦要做无效的事情呢 你想看时，我再加载（哈哈）
2、原理：
1）、先将img标签的src链接设为同一张图片(默认图片：可以是loading)，把图片的实际地址赋给一个自定义属性。这时候所有的图片只发送一次请求。
2）、然后，当js监听到某张图片进入可视窗口时（说明你想看了），再将实际地址赋给src属性。src属性的值发生变化时，浏览器才会发送请求加载当前图片。如果图片没有进入可视区域，就不会加载图片（说明你还没想看呢），这样就大大的提高了效率。
3、示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
li{
width: 100%;
height: 200px;
text-align: center;
line-height: 200px
}
img{
display: block;
height: 200px;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
<script>
let imgDoms = document.getElementsByTagName("img");
// 当前显示图片的最大下标：
let maxIndex = -1;
window.onload = function(){
// 1、从后端获取到所有的图片地址，先赋值给图片标签的自定义属性（data-src),给图片的src赋值为loading
getImgs();
// 2、加载可视区域的图片
loadingImg();
}
window.onscroll = function(){
loadingImg();
}
// 从后端获取到所有的图片地址，先赋值给图片标签的自定义属性（data-src),给图片的src赋值为loading
function getImgs(){
//这个数组中的图片，可以是从后端获取到的，也可以写死。
let imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg","img/9.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg","img/14.jpg","img/15.jpg","img/16.jpg","img/17.jpg","img/18.jpg","img/19.jpg","img/20.jpg","img/21.jpg","img/22.jpg","img/23.jpg","img/24.jpg","img/25.jpg","img/26.jpg","img/27.jpg","img/28.jpg","img/29.jpg","img/30.jpg","img/31.jpg","img/32.jpg","img/33.jpg"];
let htmlStr = "";
for(let i=0;i<imgs.length;i++){
htmlStr+=`<img src="img/loading02.gif" data-src="${imgs[i]}" />`;
}
document.getElementById("box").innerHTML = htmlStr;
}
function loadingImg(){
// 1、计算当前滚动的高度+可视区域的高度（此处考虑的兼容性）
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
let height = scrollTop+clientHeight;
// 2、得到应该显示图片的序号(可视区域最下面的图片序号)；
let index = Math.ceil(height/200)-1;
// 3、如果应该显示的图片的下标大于最大的下标，那就应该做图片的加载了。
if(index>maxIndex){
for(let i=maxIndex+1;i<=index;i++){
if(imgDoms[i].getAttribute("data-src")){
imgDoms[i].src = imgDoms[i].getAttribute("data-src");
imgDoms[i].removeAttribute("data-src");
}
}
}
maxIndex = index;
}
</script>
