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 remove方法应用详解
Nov 22 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 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 has encountered an Access Violation
2007/01/15 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
javascript如何创建对象
2016/08/29 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
Django框架验证码用法实例分析
2019/05/10 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
个人实用的自我评价范文
2013/11/23 职场文书
应用数学自荐书范文
2013/11/24 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
测量工程专业求职信
2014/02/24 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
新郎新娘答谢词
2015/01/04 职场文书
出生公证书
2015/01/23 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js