圖片的懶加載

懶加載作用：

1.提升用戶體驗，避免出現卡頓現象。

2.有選擇的請求圖片，減少服務器的壓力和流量，減少瀏覽器的負擔。

懶加載的實現過程：

將圖片的src屬性設置爲“，圖片的真實路徑設置到data-src屬性中。頁面滾動的時候計算圖片的位置與滾動的位置，當圖片出現在瀏覽器視口內時，將圖片的src屬性設置爲data-src屬性的值。實現懶加載。

html結構代碼：

 <ul id="picUl">
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>

          <li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
          
        </ul>

css樣式代碼：

 ul{
        width: 1000px;
        height: 800px;
        overflow: scroll;
        border: 1px solid #000;
        padding: 0;
      }
      ul li {
        list-style: none;
        float: left;
      }
      .imgLazyLoad{
        width: 300px;
        height: 300px;
        /*float: left;*/
        margin: 10px 10px;
      }

js代碼：

 <script type="text/javascript">

      var picList=nodeToArray("imgLazyLoad");
      var parentElement=document.getElementById('picUl');

      function nodeToArray(element) {                //將類數組轉化爲數組
        var nodes=document.getElementsByClassName(element);
        return Array.prototype.slice.call(nodes);       
      }

      function jugeTop(child,parent) {             //判斷圖片是否在可視區
        return child.offsetTop-parent.scrollTop<parent.offsetHeight;
      }

      function showPic(elementList,parent) {              //懶加載圖片
        for (var i = 0; i < elementList.length; i++) {
          if(jugeTop(elementList[i],parent)){
            elementList[i].src=elementList[i].getAttribute('data-src');            
            elementList.splice(i,1);
            i--;
          }
        }
      }

      showPic(picList,parentElement);  //初始化首頁的圖片

      function throttle(){

        var curTime=new Date();
        return function(){

            var timeout;
            clearTimeout(timeout);

            if (new Date()-curTime>1000) {             

              curTime=new Date();
              showPic(picList,parentElement);
            }else{
               timeout=setTimeout(function() {
                showPic(picList,parentElement);
            }, 500);
            }                      
        }                
      }

      parentElement.addEventListener('scroll', throttle());

    </script>

節流函數：防止高頻率的觸發，保證了在一定時間間隔內一定會被觸發一次。

參考：點擊打開鏈接