js圖片懶加載(滾動加載)判斷是否生效

1、什麼是懶加載?javascript

  對未出如今視野範圍內的圖片先不進行加載,等到出如今視野範圍纔去加載。前端

2、爲何使用懶加載?java

  懶加載的主要目的是做爲服務器前端的優化,減小請求數或延遲請求數。jquery

理論性知識你們都有本身的獲取渠道,很少說,下面看具體內容服務器

引入js文件  jquery.lazyload.js測試

<script type="text/javascript" src="__ROOT__/Public/admin/lib/jquery/lazyload/jquery.lazyload.js"></script>

HTML頁面優化

<img class="lazy imgShow" src="{$val.sharingimg}" width="50px;">
<script>
    $(document).ready(function(){
        $("img.lazy").lazyload({
            effect : "fadeIn",
            failurelimit : 3    //failurelimit : 10 在找到10張不在可視範圍內的圖片時中止執行
        });
    });
</script>

測試spa

打開Google Chrome        Network選項 Slow 3Gcode

看下個人測試結果blog

一、打開頁面 看下加載的內容

二、下拉後,對比下 

以上就是所有內容,若有錯誤,還請指正,謝謝。

相關文章
相關標籤/搜索