JavaScript图像延迟加载库Echo.js


Posted in Javascript onApril 05, 2016

Echo 是一个独立的 JavaScript 懒加载图像的工具,快速、体积小(不足1k)和使用 HTML5 的 data- 属性。Echo 支持 IE8+ 。

插件描述:和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库,可独立使用。并且 Echo.js 非常小巧,压缩后不足 1KB。

兼容性

Echo.js 使用了 HTML5 的 date 属性,并且需要获取该属性的值,所以它并不兼容 IE6、IE7。虽然 Lazy Load 也使用了 HTML5 的 date 属性,但它获取值的方法不一样。

使用方法

1、引入文件

<script src="js/echo.min.js"></script>

2、HTML

<img src="images/blank.gif" alt="pic" data-echo="img/pic.jpg" width="640" height="480">

blank.gif 是一个 1 x 1 的图片,用做默认图片,data-echo 的属性值是图片的真实地址。同样最好给图片设置宽度和高度,或者在 CSS 中设置也可以,否则似乎很底部很底部的图片才会延迟加载。

3、JavaScript

Echo.init({
offset: 0,
throttle: 0
});

参数

参数 说明
offset 离可视区域多少像素的图片可以被加载
throttle 图片延迟多少毫秒加载

以上内容是针对JavaScript图像延迟加载库Echo.js ,希望对大家有所帮助!

Javascript 相关文章推荐
js的event详解。
Sep 06 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
React如何避免重渲染
Apr 10 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
使用Ajax实现进度条的绘制
Apr 07 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 #Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 #Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 #Javascript
js拖拽的原型声明和用法总结
Apr 04 #Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 #Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 #Javascript
javascript拖拽效果延伸学习
Apr 04 #Javascript
You might like
php获取数组中重复数据的两种方法
2013/06/28 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
js Math 对象的方法
2013/09/01 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
前端性能优化及技巧
2016/05/06 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
js实现扫雷源代码
2020/11/27 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
Django验证码的生成与使用示例
2017/05/20 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
python多进程间通信代码实例
2019/09/30 Python
python实现自动打卡的示例代码
2020/10/10 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
我的大学生活职业生涯规划
2014/01/02 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
大学班级文化建设方案
2014/05/06 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python