jQuery lazyload 圖片懶載入實現

標籤：lan   data   code   點擊   特定   元素   距離   http   click   

現在網站頁面內容越來越豐富，圖片內容也越來越多，而圖片過多會導致網頁檔案過大，從而引發載入緩慢的問題，而圖片懶載入就是為解決這一問題而生。

首先我們來講Jquery的懶載入控制項

 jQuery lazyload.JS

 　　jQuery lazyload.JS 地址：https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js  直接複製源碼到本地

 　　jQuery lazyload.JS是用 jQuery編寫的一個控制項，所以要運行 jQuery lazyload.JS必須先載入  jQuery

1、請將下列代碼加入</body>前: 

 

　　<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 　　<script type= "text/javascript" src= "jquery.lazyload.js" ></script> 2、首先圖片大小必須設定，然後刪除圖片的src標籤,將圖片的地址放在data-original屬性上，給懶載入映像一個特定的class（例如:lazy）
代碼如下：

　　<img class="lazy" alt="" width="800" height="5000" data-original="img/lazy1.jpg" />

　　$( function () { 　　 　　 $( "img.lazy" ).lazyload(); 　　}); 3、效果設定更改 　　 jQuery lazyload.JS在載入時有很多選項可以設定：　　1、設定臨界點　　　　預設情況片是進入螢幕地區後再載入. 如果你想提前載入圖片, 可以設定threshold 選項, 比如設定 threshold 為 150 令圖片在距離螢幕 150 像素時提前載入.　　　 　　　　$( "img.lazy" ).lazyload({  　　　　　　 threshold : 200 　　　　}); 　　2、事件觸發載入　　　　也可以通過各類事件來觸發載入，如點擊事件： 　　　　$( "img.lazy" ).lazyload({  　　　　　　 event : "click" 　　　　});　　3、特效載入　　　　預設是調用show()進行載入，你當然可以使用你想要的效果來實現。比如下面的代碼使用fadeIn （淡入效果）：　　　　 　　　　$( "img.lazy" ).lazyload({  　　　　 effect : "fadeIn" 　　　　});　　4、提前載入圖片　　　　你也可以設定提前載入幾張圖片來提升網頁瀏覽的連貫性，這由failure_limit的值來決定：　　　　 　　　　$( "img.lazy" ).lazyload({  　　　　　　 failure_limit : 2 　　　　});　　5、載入隱藏的圖片　　　　Lazy Load 預設忽略了隱藏圖片. 如果你想要載入隱藏圖片, 請將 skip_invisible 設為 false： 　　　　$( "img.lazy" ).lazyload({  　　　　　　 skip_invisible : false 　　　　}); 4、為了在某些瀏覽器或使用者未啟用JS或js控制項載入失敗的情況下實現優雅降級, 可以添加noscript標籤，然後通過 CSS 先隱藏帶控制項的img元素，同時讓控制項執行成功時先運行show()方法將img元素顯示出來，再運行懶載入.最後代碼如下：

<style type="text/css">
　　img {
　　width: 100%;
　　}
　　.lazy{display: none;}
</style>
<img src="lun1.jpg" ><br>
<img src="lun2.jpg" ><br>
<img data-original="lun1.jpg" class="lazy" ><br>
　　<noscript><img src="lun1.jpg" ></noscript>
<img data-original="lun4.jpg" class="lazy" ><br>
　　<noscript><img src="lun4.jpg" ></noscript>
<img data-original="lun5.jpg" class="lazy" ><br>
　　<noscript><img src="lun5.jpg" ></noscript>
<img data-original="lun4.jpg" class="lazy" ><br>
　　<noscript><img src="lun4.jpg" ></noscript>
<img data-original="lun2.jpg" class="lazy" ><br>
　　<noscript><img src="lun2.jpg" ></noscript>
<img data-original="lun1.jpg" class="lazy" >
　　<noscript><img src="lun1.jpg" ></noscript>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src=‘jqueryLazyload.js‘></script>
<script type="text/javascript">
$(function() {
　　$("img.lazy").show().lazyload({
　　　　effect:‘fadeIn‘
　　});
});

</script>

 

 

jQuery lazyload 圖片懶載入實現