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 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 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
德生PL330测评
2021/03/02 无线电
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
在Django中同时使用多个配置文件的方法
2015/07/22 Python
python操作mysql数据库
2017/03/05 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
python对Excel的读取的示例代码
2020/02/14 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
综合办公室主任职责
2013/12/16 职场文书
幼儿教师研修感言
2014/02/12 职场文书
导师推荐信范文
2014/05/09 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
开幕式邀请函
2015/01/31 职场文书
基层党建工作简报
2015/07/21 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS