简单的JavaScript图像延迟加载库Echo.js
插件描述:和 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="data: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图片延迟加载库Echo.js
简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...
- JavaScript语法高亮库highlight.js使用
highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库 ...
- javascript模块化编程库require.js的用法
随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...
- ECHO.js 纯javascript轻量级延迟加载
演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf ...
- 如何使用echo.js实现图片的懒加载(整理)
如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- echo.js 延迟加载图片控件
echo.js的github地址:https://github.com/toddmotto/echo echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...
- 延迟加载图片控件--echo.js
echo.js的github地址:https://github.com/toddmotto/echo echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...
随机推荐
- 遇到的[]bug
"Runtime Error Message:reference binding to null pointer of type 'struct value_type' Last execu ...
- SecureCRT连接开发板 串口传输、tftp传输
1.串口传输 使用命令:rx r是service, x是X-model模式 ①.rx 文件名 再按Enter键 ②.将需要传到板子上的文件 拖到SecureCRT里面,选择发送X-model选项 注 ...
- 【iOS】値の判断
NSString str; ){ //nilの判断 //nullの判断 //長さの判断 // ...... }
- model 字段参数 choice
class Banner(NewsBase): ''' 轮播图 ''' PRI_CHOICES = [ # 优先级的限制选择范围 (1,'第一级'), (2,'第二级'), (3,'第三级'), (4 ...
- vue响应式原理
vue的响应式,数据模型仅仅是普通的Javascript对象.当你修改它们时,视图会进行更新 那么如何追踪变化: 当把普通的js对象传给vue实例的data选项,Vue将遍历此对象的所有属性,并使用O ...
- SwipeBackLayout 右滑退出Activity
不推荐通过添加依赖的方式来导入类库,因为本人导入后出现没法解决的问题. 这里推荐自己导入第三方库类,地址如下: https://github.com/yangzhilong00/MEvolution/ ...
- python基础(17)继承类和面向对象初识
1.继承类 class Lm: money = 1000000 house = 5 def driver(self): print('会开车') class Mcb(Lm): def about_me ...
- java_24.1文件流的应用--复制文件
注意:先开的流要最后关 用字节流传输 public class Demo { public static void main(String[] args){ FileInputStream fis = ...
- Git上传代码的步骤
1.git status 列出来所有修改的文件2.git add 所有的文件列表,或者git add -A,添加所有文件到Add列表 3.git reset --hard 取最新的git标签 4.gi ...
- 20170506计划-----(基于python查询oracle语句)
在日常的工作中,经常接到开发同事查询生产SQL的请求,公司又不允许对开发开放查询SQL的权限,并且查询的堡垒机又很慢,计划做一个可以自动查询SQL的小工具,一周内完成吧. 大概功能实现了,一些涉及敏感 ...