图片懒加载

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>