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 相关文章推荐
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
vue ssr 指南详读
Jun 29 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
Jquery Fade用法详解
Nov 06 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
JavaScript模块详解
2017/12/18 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
npm qs模块使用详解
2020/02/07 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
python try 异常处理(史上最全)
2019/03/07 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
python 图片去噪的方法示例
2019/07/09 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
综合测评自我鉴定
2013/10/08 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
财务务虚会发言材料
2014/10/20 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript