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
一、打開頁面 看下加載的內容
二、下拉後,對比下
以上就是所有內容,若有錯誤,還請指正,謝謝。