懒加载和预加载

时间 2019-11-20

标签加载繁體版

原文原文链接

提到前端性能优化中图片资源的优化，懒加载和预加载就不能不说javascript

懒加载：css

　　1概念：html

　　　　访问页面时，先把img元素的背景图片src替换成一张占位图，这样只须要请求一次，当图片出如今浏览器的可视区域内时，再设置图片的真实路径，显示图片。前端

　　2优势：java

　　　　页面长图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载能够使页面加载速度快、减轻服务器的压力、节约流量。node

　　3步骤：jquery

　　　　页面中的img元素，若没有src属性，浏览器就不会发出请求去下载图片，只有经过javascript设置了图片路径，浏览器才会发送请求。api

　　　　1)懒加载先在页面中把须要延迟加载的图片统一使用一张占位符进行占位，把真正的路径存在元素“data-url”属性里。数组

　　　　2)页面加载完成后，经过scrollTop判断图片是否在用户的视野，若是在，则将data-url的值取出来存放到src中。浏览器

　　　　3)在滚轮事件中重复判断图片是否进入视中，若是在，则将data-url的值取出来存放到src中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒加载测试</title>
    <style type="text/css">
        img{
            display: block;
            height: 900px;
            width: 100%;
        }
    </style>
    <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
</head>
<body>
    <div class="lazyload">
        试试看页面是否加载
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">    
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">    
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">    
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
    </div>        
</body>
    <script type="text/javascript">
            var pic=document.getElementsByTagName('img');
　　　　　　　　//这里是图片路径数组 也能够直接写到img标签的属性里面，就不用下面的for循环了
            arr=['image/api_thumb_450 (1).jpg','image/api_thumb_450 (2).jpg','image/api_thumb_450 (3).jpg','image/api_thumb_450 (4).jpg'];
            for(var i=0,l=arr.length;i<l;i++){
                //pic[i].setAttribute('src-data',arr[i]);
                pic[i].setAttribute('data-img',arr[i]);
            }
        

/*亲测有效*/
        var lazyload=(function(){
            var clock;
            function init(){
                $(window).on('scroll',function(){
                    if(clock){
                        clearTimeout(clock);
                    }
                    clock=setTimeout(function(){
                        checkShow();
                    },200);
                })
                checkShow();
            }
            function checkShow(){
                $('.lazyload img').each(function(){
                    var $cur=$(this);
                    if($cur.attr('isLoaded')){
                        return;
                    }else{

                    }
                    if(shouldShow($cur)){
                        showImg($cur);
                    }
                })
            }
            function shouldShow($node){
                var scrollH=$(window).scrollTop(),
                    winH=$(window).height(),
                    top=$node.offset().top;
                    if(top<winH+scrollH){
                        return true;
                    }else{
                        return false;
                    }
            }

            function showImg($node){
                $node.attr('src',$node.attr('data-img'));
                $node.attr('isLoaded',true);
            }
            return {
                init:init
            }
        })()
        lazyload.init();
        
    </script>
</html>

来看看另外一种方法，代码少了不少呢……

来自：https://www.cnblogs.com/Cathamerst/p/7445715.html

懒加载的要点：

　　1.图片进入可视区域以后请求图片资源

　　2.对于电商等图片较多，页面很长的业务场景很适用；

　　3.能够减小无效资源的加载

　　4.并发加载的资源过多会阻塞js的加载，影响网站的正常使用；

如何实现懒加载？要点就是html中img标签src属性为空，给一个data属性，里面存放图片真实地址，在须要的时候，动态的将这个地址赋予图片src属性。

以下所示：

<img src="" class="image-item" lazyload="true" data-original="http://pic26.nipic.com/20121213/6168183_004444903000_2.jpg" />
<!--lazyload用于判断是否被加载  data-original用于存储图片地址-->

相似上述代码所示，须要的时候，用js脚本控制图片的加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒加载测试</title>
    <style type="text/css">
        img{
            display: block;
            height: 900px;
            width: 100%;
        }
    </style>
    <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
</head>
<body>
    <div class="lazyload">
        试试看页面是否加载
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">    
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">    
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">    
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
        <img src="" alt="">
    </div>        
</body>
    <script type="text/javascript">
            var pic=document.getElementsByTagName('img');
            arr=['image/api_thumb_450 (1).jpg','image/api_thumb_450 (2).jpg','image/api_thumb_450 (3).jpg','image/api_thumb_450 (4).jpg','image/api_thumb_450 (5).jpg','image/api_thumb_450 (6).jpg','image/api_thumb_450 (7).jpg','image/api_thumb_450.jpg','image/api_thumb_450 (8).jpg','image/api_thumb_450 (9).jpg','image/api_thumb_450 (10).jpg','image/api_thumb_450 (11).jpg','image/api_thumb_450 (12).jpg','image/api_thumb_450 (13).jpg','image/api_thumb_450 (14).jpg','image/api_thumb_450 (15).jpg','image/api_thumb_450 (16).jpg','image/api_thumb_450 (17).jpg','image/api_thumb_450 (18).jpg','image/api_thumb_450 (19).jpg','image/api_thumb_450 (20).jpg'];
            for(var i=0,l=arr.length;i<l;i++){
                //pic[i].setAttribute('src-data',arr[i]);
                pic[i].setAttribute('data-img',arr[i]);
                pic[i].setAttribute('lazyload',true);
            }
        

/*亲测有效*/
/*版本2*/
        var viewHeight=document.documentElement.clientHeight;//可视区域的高度
        function lazyload(){
            //获取全部要进行懒加载的图片
            var eles=document.querySelectorAll('img[data-img][lazyload]');
            Array.prototype.forEach.call(eles,function(item,index){
                var rect;
                if(item.dataset.img===''){
                    return;
                }else{

                }
                rect=item.getBoundingClientRect();
                //图片进入可视区域后便动态加载
                if(rect.bottom>=0&&rect.top<viewHeight){
                    !function(){
                        var img=new Image();
                        img.src=item.dataset.img;
                        img.onload=function(){
                            item.src=img.src;
                        }
                        item.removeAttribute('data-img');
                        item.removeAttribute('lazyload');
                    }();
                }else{

                }
            })
        }
        lazyload();
        document.addEventListener('scroll',lazyload);
    </script>
</html>