前言
閒來無事研究了一下網站圖片懶加載，目前來看比較流行的是lazyload和echo兩種方式，兩種方式稍作對比：lazyload依賴於jquery，所以再引入該插件前，需要首先引入jquery；echo不依賴任何庫，可以拿來即用，另外echo非常小，壓縮後不到1k，並且Echo 支持 IE8+。ps：個人比較推薦拿後者來做圖片的延遲加載。
lazyload 使用
<!<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery 圖片延時加載</title>
<script src="jquery/dist/jquery.min.js"></script>
<script src="jquery-lazyload/jquery.lazyload.js"></script>
</head>
<body>
<div class="demo">
<img class="lazyload" src="images/loading.gif" data-original="images/big-1.jpeg" width="1000" height="760">
<img class="lazyload" src="images/loading.gif" data-original="images/big-2.jpeg" width="1000" height="760">
<img class="lazyload" src="images/loading.gif" data-original="images/big-3.jpeg" width="1000" height="760">
<img class="lazyload" src="images/loading.gif" data-original="images/big-4.jpeg" width="1000" height="760">
<img class="lazyload" src="images/loading.gif" data-original="images/big-5.jpeg" width="1000" height="760">
<img class="lazyload" src="images/loading.gif" data-original="images/big-6.jpeg" width="1000" height="760">
<img class="lazyload" src="images/loading.gif" data-original="images/big-7.jpeg" width="1000" height="760">
<img class="lazyload" src="images/loading.gif" data-original="images/big-8.jpeg" width="1000" height="760">
</div>
</body>
<script type="text/javascript">
$(function(){
// $('img').lazyload(); //基礎應用
$('img').lazyload({
threshold : 0, //當圖片沒有看到之前先load 200像素
effect:'fadeIn', //使用特效
failure_limit : 20, //當插件找到 20 個不在可見區域的圖片時停止搜索
event:'scroll'
});
});
</script>
</html>src 屬性放置的一般是圖片加載前的佔位圖，通常用一個loading圖表示即可。
data-original 放置的是要展示的圖片的實際路徑。
$('img').lazyload() 對插件進行初始化，初始化時可以進行配置，具體配置參數可以參見官網。
注意：當前我使用的lazyload版本是1.9.7, 2.0以上版本的api和目前所用的稍有差別，具體請參見官網，
附上官網地址：jQuery.lazyload api
echo 使用
<!<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echo 圖片延時加載</title>
<script src="../js/echo.min.js"></script>
</head>
<body>
<div class="demo">
<img src="images/loading.gif" data-echo="images/big-1.jpeg" width="1000" height="760">
<img src="images/loading.gif" data-echo="images/big-2.jpeg" width="1000" height="760">
<img src="images/loading.gif" data-echo="images/big-3.jpeg" width="1000" height="760">
<img src="images/loading.gif" data-echo="images/big-4.jpeg" width="1000" height="760">
<img src="images/loading.gif" data-echo="images/big-5.jpeg" width="1000" height="760">
<img src="images/loading.gif" data-echo="images/big-6.jpeg" width="1000" height="760">
<img src="images/loading.gif" data-echo="images/big-7.jpeg" width="1000" height="760">
<img src="images/loading.gif" data-echo="images/big-8.jpeg" width="1000" height="760">
</div>
</body>
<script>
//Echo.init();
Echo.init({
offsetL:0,
offsetVertical:0,
throttle:250, //
debounce:'alertInfo',
//記錄輸出日誌用
callback:function(args){
//...
}
});
</script>
</html>src 屬性同樣是展位圖
data-echo 纔是實際圖片的路徑。
注意：
echo.js還提供了一個render()方法，應用場景：當你的頁面沒有發生滾動，而你想加載即將要顯示的圖片，如圖片輪播，當第一張圖片顯示完，接着滑動展示第二張圖片，這個時候使用echo.render();提前加載第二張圖片，就不會出現圖片加載卡頓白屏等現象。