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 相关文章推荐
ExtJS下grid的一些属性说明
Dec 13 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
js闭包学习心得总结
Apr 17 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
超漂亮的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使用socket post数据到其它web服务器的方法
2015/06/02 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
Python打包可执行文件的方法详解
2016/09/19 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
Django如何使用redis作为缓存
2020/05/21 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
String和StringBuffer的区别
2015/08/13 面试题
Sony C++笔试题
2013/03/10 面试题
CAD制图人员的自荐信
2014/02/07 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
男人帮观后感
2015/06/18 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android