前言
闲来无事研究了一下网站图片懒加载，目前来看比较流行的是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();提前加载第二张图片，就不会出现图片加载卡顿白屏等现象。