码迷,mamicode.com
首页 > 其他好文 > 详细

图片懒加载和预加载

时间:2019-10-03 10:51:57      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:https   tom   fun   说明   dataset   load   数组   doctype   mfs   

懒加载实际上就是通过计算图片的到可视区窗口的距离,如果图片的顶部到可视区窗口的底部的距离小于等于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>

 

图片懒加载和预加载

标签:https   tom   fun   说明   dataset   load   数组   doctype   mfs   

原文地址:https://www.cnblogs.com/panjingshuang/p/11619025.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!