網頁性能優化之圖片懶加載

一、前言

最近因爲需要做一個小網站，但是呢，因爲圖片比較多，打開網頁速度很慢，服務器壓力就會很大。不僅影響渲染速度還會浪費帶寬，比如一個1M大小的圖片，併發情況下，達到1000併發，即同時有1000個人訪問，就會產生1個G的帶寬。於是就想到了圖片懶加載來減輕服務器的壓力，優先加載可視區域的內容，其他部分等進入了可視區域再加載，從而提高性能，可以大幅度的提高網頁加載速度，效果很明顯，於是想着將這個方法記錄下來，方便以後或者有需要的人使用，方法和功能都是親測可用，請放心觀看。

二、原理

先將 img 標籤的 src 鏈接設爲同一張圖片（一般是loading.gif圖片），然後給 img標籤 設置自定義屬性（ data-src），然後將真正的圖片地址存儲在 data-src 中，當JS監聽到該圖片元素進入可視窗口時，將自定義屬性中的地址存儲到src屬性中。達到懶加載的效果。這樣做能防止頁面一次性向服務器發送大量請求，導致服務器響應面，頁面卡頓崩潰等。

三、實現

網頁loading.gif 素材 ：http://www.sucaijishi.com/2013/gif_0527/57.html

  <a  href="javascript:;" class="img" rel="nofollow" >
       <img src="/static/images/utils/loading.gif" th:data-src="${goodList.goodsImg}">
  </a>

Js實現原理

<script>

    // 一開始沒有滾動的時候，出現在視窗中的圖片也會加載
    start();

    // 當頁面開始滾動的時候，遍歷圖片，如果圖片出現在視窗中，就加載圖片
    var clock; //函數節流
    $(window).on('scroll',function(){
        if(clock){
            clearTimeout(clock);
        }
        clock = setTimeout(function(){
            start()
        },200)
    })

    function start(){
        $('.img img').not('[data-isLoading]').each(function () {
            if (isShow($(this))) {
                loadImg($(this));
            }
        })
    }


    // 判斷圖片是否出現在視窗的函數
    function isShow($node){
        return $node.offset().top <= $(window).height()+$(window).scrollTop();
    }

    // 加載圖片的函數，就是把自定義屬性data-src 存儲的真正的圖片地址，賦值給src
    function loadImg($img){
        $img.attr('src', $img.attr('data-src'));

        // 已經加載的圖片，我給它設置一個屬性，值爲1，作爲標識
        // 弄這個的初衷是因爲，每次滾動的時候，所有的圖片都會遍歷一遍，這樣有點浪費，所以做個標識，滾動的時候只遍歷哪些還沒有加載的圖片
        $img.attr('data-isLoading',1);
    }

</script>

四、效果展示