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 学习笔记(十四) 正则表达式
Jan 22 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 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中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
探讨php中header的用法详解
2013/06/07 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
Python global全局变量函数详解
2018/09/18 Python
Python中的取模运算方法
2018/11/10 Python
django 自定义过滤器的实现
2019/02/26 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
python3 字符串知识点学习笔记
2020/02/08 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
python与js主要区别点总结
2020/09/13 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
取保候审保证书
2014/04/30 职场文书
献爱心活动总结
2014/05/07 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
2014年销售部工作总结
2014/12/01 职场文书
志愿服务心得体会
2016/01/15 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript