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 中的内存泄露模式
Aug 13 Javascript
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
超漂亮的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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
php中chdir()函数用法实例
2014/11/13 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
详解vue-resource promise兼容性问题
2017/06/20 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
python实现名片管理系统
2018/11/29 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
学期自我鉴定范文
2013/10/01 职场文书
出纳的岗位职责
2013/11/09 职场文书
幼儿教师工作感言
2014/02/14 职场文书
运动会口号大全
2014/06/07 职场文书
收费员岗位职责
2015/02/14 职场文书
文明礼仪主题班会
2015/08/13 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python
Golang 字符串的常见操作
2022/04/19 Golang