lazyload.JS實現圖片異步延遲加載

前言：不少時候網站上不少圖片一次性加載會很慢很卡……這個能夠幫助你

使用場景：個人使用場景是點擊圖片再加載圖片。

地址：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

網站：https://github.com/tuupola/jquery_lazyload

使用很簡單，他自己是Jquery插件JS寫的，依賴於JS只須要引入就能夠了。

引入JS

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

使用：

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">

<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480">

以上2種寫法是同樣的，只是一個把默認圖片放在了標籤上，一個放在了後面事件中。

src：是默認顯示的圖片。

data-original：是真實地址的圖片。

使用方法：

$("img.lazy").lazyload();// 最簡單的使用方法

$("img.lazy").lazyload({effect: "fadeIn", failure_limit: 6, effect_speed: 1000,placeholder:"../css/jquerymobile/images/defImg.jpg"});

這個就能夠把默認圖片不寫在img標籤上而是最後綁定事件中放上去，這句話意思是在頁面渲染完成後給樣式是lazy的img標籤組建添加異步加載事件。

$("img.lazy").lazyload({effect: "fadeIn", failure_limit: 6, effect_speed: 1000,event : "click",placeholder:"../css/jquerymobile/images/defImg.jpg"});

這個和上面那個幾乎是同樣的只是點擊纔會加載真實地址圖片。

參數解析：

effect：顯示動畫（fadeIn/……）還有一些能夠網上搜下。

effect_speed：動畫時間，默認400毫秒。

failure_limit：默認加載多少張圖片（滾動會自動在加載後面的，也就是可視範圍內的圖片）。

click：事件，點擊事件加載圖片能夠用（還有鼠標一上去各類事件都是能夠的）。

placeholder：默認加載的圖片地址（也能夠在img標籤src內寫）。

還有不少不少……網絡上不少不少……

參考連接：http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/