前端懒加载

ECHO前端框架

1、特殊性：

• 不需要引入JQuery或者其他的js库，可单独使用
• 十分小巧方便，压缩后不足1KB
• 因echo.js使用的H5的data属性，因此并不兼容IE6、IE7

2、如何使用

• 需要引入echo.js
  下载echo.js （在博客园的文件管理中有上传）
• 编写HTML代码
  <img src="images/default.png" data-echo="img/pic.jpg">
• 编写JS代码

echo.init({
    offset: 100,
    throttle: 250,
    unload: false,
    callback: function (element, op) {
    console.log('loaded ok.');
    }
    });

echo.init() ===>当echo大写时（ECHO）可能会运行出错，因此改成了小写

3、参数说明

参数	描述	默认值
offset	离可视区域多少像素的图片可以被加载	0
throttle	图片延迟多少毫秒加载	250
debounce	防抖动	true
unload	告诉echo是加载还是卸载视图中的图片，当图片离开视图区域时触发	false
callback	回调函数，用来检测图片是否加载	function()

4、 render()方法

最后echo.js还提供了一个.render()方法，用法如下：

echo.render();

应用场景：当你的页面没有发生滚动，而你想加载即将要显示的图片，如图片轮播，当第一张图片显示完，接着滑动展示第二张图片，这个时候使用echo.render()