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中confirm,alert,prompt函数区别分析
Jan 17 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 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
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
PHP处理会话函数大总结
2015/08/05 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
简单学习vue指令directive
2016/11/03 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
python挖矿算力测试程序详解
2019/07/03 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Python插件机制实现详解
2020/05/04 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
Linux内核产生并发的原因
2016/11/08 面试题
养殖行业的创业计划书
2014/01/05 职场文书
银行贷款委托书范本
2014/10/11 职场文书
国家助学金感谢信
2015/01/21 职场文书
专家推荐信怎么写
2015/03/25 职场文书
团日活动总结格式
2015/05/11 职场文书
管辖权异议上诉状
2015/05/23 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
Python Socket编程详解
2021/04/25 Python
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python