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 相关文章推荐
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 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生成excel文件的简单方法
2014/02/08 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP进程通信基础之信号
2017/02/19 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
社区法制宣传日活动总结
2015/05/05 职场文书
新郎接新娘保证书
2015/05/08 职场文书
旗帜观后感
2015/06/08 职场文书
技能培训通讯稿
2015/07/18 职场文书
创业计划书之花店
2019/09/20 职场文书
六年级作文之自救
2019/12/19 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang