图片懒加载和预加载

懒加载实际上就是通过计算图片的到可视区窗口的距离，如果图片的顶部到可视区窗口的底部的距离小于等于0的话，就生成一个image并设置image.src的属性值，放置到相应的图片位置

从而实现懒加载，即动态的创建image和添加image元素到页面。

预加载：要实现已进入页面就将图片下载，直接在script中创建imgae数组，循环的将图片的地址信息传递给各个image元素的src特性即可

懒加载实现：

<!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">
    <style>
        ul{
            margin-left: 50%;
            position: relative;
            left: -100px;
            width: 200px;
            height: 200px;
            background-color: gold;
            overflow: auto;
            list-style: none;
            padding: 0px;
        }
        li{
            width: 100px;
            height: 100px;
            background-color:green;
            margin-bottom: 10px;
        }

        img{
            width:100px;
            height: 100px;
        }
    </style>
    <title>懒加载</title>
</head>
<body>
    <h1>图片懒加载</h1>
    <ul>        
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
        <li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
        <li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
        <li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
        <li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
        <li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
        <li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
    </ul>
    <script>
        // 实质就是动态的生成img 让其动态的加载图片，判断是否是在可视区域内
        
       var ul = document.getElementsByTagName("ul")[0];
       var lis = document.getElementsByTagName("li");
       function check(element){
            //判断是否需要将图片加载进来
            //https://blog.csdn.net/weixin_40929761/article/details/81061434
            //offsetTop距离文档顶端的距离，scrollTop滚过的距离，200 ul的宽度 减去之后就是元素距离ul底部的距离
            //小于0就说明进入了
            if(element.offsetTop-ul.scrollTop-200<=0){
                return true;
            
            }else{
                return false;
            }
        }
       document.getElementsByTagName("ul")[0].onscroll = function (){
           for(let i=0;i<lis.length;i++){
                if(check(lis[i])){
                    lis[i].style.backgroundColor = "red";
                    var img = document.createElement("img");
                    img.src = lis[i].dataset.src;
                    lis[i].appendChild(img);
                }

           }
       }
    </script>
</body>
</html>

图片懒加载和预加载

猜你喜欢