插件描述:和jquery.lazyload.js一样,Echo.js也是一个用于图片延迟加载的插件库。
特点:
1.不依懒于jquery或其他插件库,可以独立使用
2.轻小便捷,压缩后大小不足1kb
3. 除了懒加载,还提供了throttle——节流,即用户快速滑动列表时,很快滑过的项的图片不会加载,只会加载最后停下来的位置的附近的图片。
兼容性:
1.Echo.js使用了HTML5里的data属性,并且需要获取该属性的值,所以不兼容IE6,IE7。
如何使用:
1.引入文件
<script src=”js/echo.min.js”></script>
2.HTML结构
<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg" />
说明: src=”img/blank.gif”是用做默认图片,data-echo的属性值是图片的真实地址,要给img设置宽高
3.设置延迟加载特效(图片没加载出来的时候,会出现一个loading旋转特效,用的是gif动态图)
img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;}
4.脚本里设置参数:
<script>
Echo.init( {
// 离可视区域多少像素的图片可以被加载
offset : 0,
// 图片延迟多少毫秒加载
throttle : 0,
// 防抖动
debounce : true // 默认值
// 告诉echo是加载还是卸载视图中的图片,当图片离开视图区域时触发
unload : false //默认值
// 回调函数,用来检测图片是否加载
callback : function (element,op ) {
console.log( ‘loade ok’ )
}
} )
</script>