图片预加载和懒加载（3）——懒加载

图片懒加载：

原理是：先给所有的img标签的src属性插入一张小图片地址，如下图的“龙”字（易于加载， 速度展示，客户体验好），同时给img的data-url设置我们需要展示的高清图片地址（存放需要加载的图片地址），如下图的高清美女图片地址；等到页面滚动到分界线的时候将data-url的地址替换src地址，自然就能展示高清图片

 

 

方式一：通过定时器替换src属性值。（不推荐使用，但可以看看，简单无脑，效果一般）

<div id="lanJiaZaiBox"></div>

//js
var url = "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2423633158,4185711783&fm=58";
        var array = [
            "http://php.txdu.club/images/1.jpg",
            "http://php.txdu.club/images/2.jpg",
            "http://php.txdu.club/images/3.jpg",
            "http://php.txdu.club/images/4.jpg",
            "http://php.txdu.club/images/5.jpg",
            "http://php.txdu.club/images/6.jpg",
            "http://php.txdu.club/images/7.jpg",
            "http://php.txdu.club/images/8.jpg",
            "http://php.txdu.club/images/9.jpg",
            "http://php.txdu.club/images/10.jpg",
            "http://php.txdu.club/images/11.jpg",
            "http://php.txdu.club/images/12.jpg",
            "http://php.txdu.club/images/13.jpg",
            "http://php.txdu.club/images/14.jpg",
            "http://php.txdu.club/images/15.jpg",
            "http://php.txdu.club/images/16.jpg",
            "http://php.txdu.club/images/17.jpg",
            "http://php.txdu.club/images/18.jpg",
            "http://php.txdu.club/images/19.jpg",
            "http://php.txdu.club/images/20.jpg",
        ];

        var num = 0;
        setInterval(() => {
            for (let i = num; i < num + 5; i++) {
                let img = new Image();
                img.src = array[i];
                img.onload = () => {
                    if (num < array.length - 5) {
                        num ++;
                    }
                }
                document.getElementsByTagName("div")[0].appendChild(img);
            }
        }, 5000)

方式二：通过点击加载更多；来加载（也不推荐，做着玩玩，仅供参考）

<!--html-->
        <div id="lanJiaZaiBox"></div>
        <button onclick="dianji(n)">点击加载更多</button>    

//js配置项
        let n = 5;  //每次加载n个
        var url = "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2423633158,4185711783&fm=58";
        var array = [
            "http://php.txdu.club/images/1.jpg",
            "http://php.txdu.club/images/2.jpg",
            "http://php.txdu.club/images/3.jpg",
            "http://php.txdu.club/images/4.jpg",
            "http://php.txdu.club/images/5.jpg",
            "http://php.txdu.club/images/6.jpg",
            "http://php.txdu.club/images/7.jpg",
            "http://php.txdu.club/images/8.jpg",
            "http://php.txdu.club/images/9.jpg",
            "http://php.txdu.club/images/10.jpg",
            "http://php.txdu.club/images/11.jpg",
            "http://php.txdu.club/images/12.jpg",
            "http://php.txdu.club/images/13.jpg",
            "http://php.txdu.club/images/14.jpg",
            "http://php.txdu.club/images/15.jpg",
            "http://php.txdu.club/images/16.jpg",
            "http://php.txdu.club/images/17.jpg",
            "http://php.txdu.club/images/18.jpg",
            "http://php.txdu.club/images/19.jpg",
            "http://php.txdu.club/images/20.jpg",
        ];

//js
        let lanJiaZaiNum = 0;
        let dianji = null;
        //初始数据
        function lanJiaZaiFun() {

            for (let i = 0; i < array.length; i++) {
                let img = new Image();
                img.src = url;
                img.dataset.url = array[i];
                document.getElementById('lanJiaZaiBox').appendChild(img);
            }
        }
        
        dianji = function (n) {
            for (let i = lanJiaZaiNum; i < lanJiaZaiNum + n; i++) {
                document.getElementsByTagName("img")[i].src = document.getElementsByTagName("img")[i].dataset.url;
            }
            lanJiaZaiNum += n;
        }

        lanJiaZaiFun();

第三种：效果最好，虽然运行复杂，但耐不住效果好啊（这个看明白就行了）

<div id="lanJiaZaiBox"></div>

//js 配置参数
        var num = 200;  //分界线，num可正可负，正的时候代表，高出页面底部num像素的时候更换图片，负的时候代表距离页面底部num像素的时候
        var url = "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2423633158,4185711783&fm=58";
        var array = [
            "http://php.txdu.club/images/1.jpg",
            "http://php.txdu.club/images/2.jpg",
            "http://php.txdu.club/images/3.jpg",
            "http://php.txdu.club/images/4.jpg",
            "http://php.txdu.club/images/5.jpg",
            "http://php.txdu.club/images/6.jpg",
            "http://php.txdu.club/images/7.jpg",
            "http://php.txdu.club/images/8.jpg",
            "http://php.txdu.club/images/9.jpg",
            "http://php.txdu.club/images/10.jpg",
            "http://php.txdu.club/images/11.jpg",
            "http://php.txdu.club/images/12.jpg",
            "http://php.txdu.club/images/13.jpg",
            "http://php.txdu.club/images/14.jpg",
            "http://php.txdu.club/images/15.jpg",
            "http://php.txdu.club/images/16.jpg",
            "http://php.txdu.club/images/17.jpg",
            "http://php.txdu.club/images/18.jpg",
            "http://php.txdu.club/images/19.jpg",
            "http://php.txdu.club/images/20.jpg",
        ];

        //初始化，插入img
        for (let i = 0; i < array.length; i++) {
            let img = new Image();
            img.style.width = "100%";
            img.src = url;
            img.dataset.url = array[i];
            document.getElementById('lanJiaZaiBox').appendChild(img);
        }
        //每次滚动，就获取img举例顶部的高度，如果低于页面高度，就展示图片
        
        function windowScoll () {
            let imgList = document.getElementsByTagName("img");
            for (let i = 0; i < imgList.length; i++) {
                if(imgList[i].offsetTop -  document.documentElement.scrollTop<window.screen.height-num){
                    imgList[i].src = imgList[i].dataset.url;
                }
            }
        }
        window.onscroll = windowScoll;