懶加載和預加載

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。