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中window.event事件用法详解
Dec 11 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
Javascript函数式编程语言
Oct 11 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 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 jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
Python中使用ElementTree解析XML示例
2015/06/02 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Python魔术方法专题
2020/06/19 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
婚礼证婚人演讲稿
2014/09/13 职场文书
投资入股合作协议书
2014/10/28 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android