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正确获取元素样式详解
Aug 07 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
原生JS实现萤火虫效果
Mar 07 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 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 缓存实现代码及详细注释
2010/05/16 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
实例浅析js的this
2016/12/11 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
Python中的is和id用法分析
2015/01/26 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
python字符串的方法与操作大全
2018/01/30 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
Regatta官网:英国最受欢迎的户外服装和鞋类品牌
2019/05/01 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
公司股权转让协议书
2014/04/12 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
委托书格式要求
2015/01/28 职场文书
蓬莱阁导游词
2015/02/04 职场文书
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL