图片懒加载之echo.js

2021/11/14 6:10:05

编程Tag： js 图片加载视图 render echo

本文主要是介绍图片懒加载之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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！