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的15款幻灯片插件
Apr 10 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
ES6中的Javascript解构的实现
Oct 30 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魔术方法__GET、__SET使用实例
2014/11/25 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
如何在PHP中使用数组
2020/06/09 PHP
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
Python单链表的简单实现方法
2014/09/23 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
团委竞选演讲稿
2014/04/24 职场文书
项目工作说明书
2014/07/29 职场文书
地方课程教学计划
2015/01/19 职场文书
比赛主持人开场白
2015/05/29 职场文书
实验室安全管理制度
2015/08/05 职场文书
英镑符号 £
2022/02/17 杂记
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB