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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
一些技巧性实用js代码小结
Oct 14 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
如何实现小程序与小程序之间的跳转
Nov 04 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/13 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
Dom 结点创建 基础知识
2011/10/01 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
Angular2库初探
2017/03/01 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
python根据京东商品url获取产品价格
2015/08/09 Python
opencv与numpy的图像基本操作
2019/03/08 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
自我评价怎么写好呢?
2013/12/05 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
主题教育活动总结
2014/05/05 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
社保转移委托书范本
2014/10/08 职场文书
教师党员承诺书2015
2015/01/21 职场文书
法学专业求职信范文
2015/03/19 职场文书
孔繁森观后感
2015/06/10 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
无故旷工检讨书
2015/08/15 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android