1、PC端圖片懶載入：

jquery.lazyload是一個實現圖片延遲載入的jQuery 外掛，它可以延遲載入長頁面中的圖片。在瀏覽器可視區域外的圖片在初始狀態下不會被載入，直到使用者將頁面滾動到它們所在的位置。

1.引入js檔案

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"
 
></script>

2.img標籤

<img class = "lazy" src="images/placeholder.gif" data-original="images/example.png">

img標籤的src指向一個圖片佔位符，這裡推薦一個線上獲取圖片佔位符的站點 > http://placehold.it/，真實圖片路徑必須寫在data-original中。

3.呼叫lazyload

$("img.lazy").lazyload();

圖片的佔位符除了可以通過src屬性來指定，也可以通過lazyload函式的引數來指定：

$("img
 
.lazy").lazyload({
    placeholder: "images/placeholder.gif"
});

4.佔位圖片事件觸發載入

如果我們希望滾到到圖片的位置後，還要通過click或hover事件來喚醒圖片的載入，我們可以指定lazyload函式的event屬性：

$("img.lazy").lazyload({
    placeholder: "images/placeholder.gif",
    event: "click"
});

當圖片完全載入的時候，外掛預設地使用show()方法來將圖顯示出來。你也可以使用其他的效果，如fadeIn：

$("img
 
.lazy").lazyload({
    effect: "fadeIn"
})

5.提前載入圖片

lazyload外掛預設使用者滾動到圖片位置時才觸發載入圖片，如果我們希望滾動到距離圖片一定位置就觸發載入，可以指定lazyload函式的threshold引數：

$(“img.lazy”).lazyload({
threshold: 200
});

這樣，當用戶滾動到距離圖片200畫素時圖片就開始載入了。

6.設定查詢圖片張數

lazyload的實現原理是，在頁面滾動時，會搜尋未載入的圖片，如果圖片在可視範圍內就載入，預設情況下當找到第一張不在可見區域的圖片時就會停止搜尋。而搜尋的順序就是HTML文件中dom節點的定義順序，所以如果有些圖片定義在前面，但由於頁面不好的佈局圖片將會呈現在後面，那麼就會導致圖片沒辦法正常顯示。

此時我們可以通過lazyload函式的failure_limit引數：

$("img.lazy").lazyload({         
     failure_limit: 10
});

這樣一來，外掛會搜尋至少10個未載入的圖片才停止搜尋，如果你的圖片佈局比較不規則，可以嘗試將這個引數調大。

下面這是一個demo 直接複製貼上到sublime上就能查看了 比心♥ ♥

// 首先引入jQuery檔案和懶載入檔案

    <script type="text/JavaScript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.w3cways.com/demo/LazyLoad/js/jquery.lazyload.js"></script>


<div>
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
</div>


<script type="text/javascript">
$(function() {
$("img.lazy").lazyload({
    placeholder: "https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg",
    effect : "fadeIn"
});
});
</script>

根據使用者行為的預載入

這個文章有時間可以看看

2、Mobile移動端懶載入：

一款非常簡單實用輕量級的圖片延時載入外掛echo.js，如果你的專案中沒有依賴jquery，那麼這將是個不錯的選擇，50行程式碼，壓縮後才1k。當然你完全可以整合到自己專案中去！
PC和移動端都適用！很輕量好用！

css:

<style>
　　.demo img { 
　　　　width: 736px; 
　　　　height: 490px; 
　　　　background: url(images/loading.gif) 50% no-repeat;}
</style>

html:

<div class="demo">
    <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">
</div>

blank.gif 是一個預設的1*1的空白圖片，data-echo 的屬性值是圖片的真實地址。設定北京圖loading.gif會有loading的效果，blank.gif會根據父盒子的寬度生成一個寬高相等的正方形塊。當blank.gif在可視區域內，圖片就會載入。

js:

<script src="js/echo.min.js"></script>

<script>

Echo.init({
    offset: 0,//離可視區域多少畫素的圖片可以被載入
　　 throttle: 0 //圖片延時多少毫秒載入
}); 

</script>

兩者都非常簡單，實現思路是一樣的，只是jquerylazyload多幾個屬性。其實常用的echo就足夠了，並且完全可以整合到自己專案中的公共js中，圖片懶載入是相當常見且簡單實用的功能，如果你的專案中還是傻瓜式的一次性全部載入，那麼請花20分鐘優化下~