Javascript

图片懒加载之echo.js

本文主要是介绍图片懒加载之echo.js，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前端懒加载

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()

这篇关于图片懒加载之echo.js的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航