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 相关文章推荐
YUI的Tab切换实现代码
Apr 11 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
JQuery教学之性能优化
May 14 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
超漂亮的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
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python3转换code128条形码的方法
2019/04/17 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
python中random模块详解
2021/03/01 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
中西医专业毕业生职业规划书
2014/02/24 职场文书
合同协议书格式
2014/04/18 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
宣传标语大全
2014/07/01 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
企业务虚会发言材料
2014/10/20 职场文书
三年级学生期末评语
2014/12/26 职场文书