圖片懶加載

摘要: 做一個功能，用的IE瀏覽器，頁面有十幾二十張圖片用http去加載，這樣頁面會卡頓一會兒，所以需要在圖片加載完成前用默認的圖片個放出來。

//圖片懶加載
$(function(){

    $("img").lazyload({
              effect: "fadeIn", //圖片加載完後自動覆蓋默認的圖片
                  failure_limit: "100"//頁面一加載，就去找100張圖片來放上加載樣式圖片。
    });
    //有些圖片可能沒有，所以做判斷加上默認圖片
     $("img").each(function(){
      if($(this).attr("data-original") == "/baqxx/static/assets/images/loading4.gif" ||$(this).attr("data-original") == ""){
            $(this).attr("src","/baqxx/static/assets/images/noImg.jpg"); 
         } 
     });
    
})

jsp代碼

<img width="265" height="230" src = "${ctx}/static/assets/images/loading4.gif"  data-original="${l.imgsrc}">

引入的jar包

<script src="${ctx}/static/assets/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="${ctx}/static/assets/js/jquery.lazyload.min.js" type="text/javascript"></script>

//jar包連接

https://pan.baidu.com/s/12-pRxWPUM5rGiaMzXgPZHw