简单的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 ...
 
随机推荐
- LinkedHashMap 根据PUT顺序排序Map
			
最近工程里面报表需要合计 , 因为所有的项都是动态的,所以只能动态添加. 思路是使用Map,初始化所有Map,然后在Map中合计并且覆盖. 使用HashMap , 初始化后所有动态项的顺序都乱了. M ...
 - css3-study-new
			
不错的:http://c7sky.com/works/css3slides/#28
 - pwnable.kr-random-witeup
			
看源代码. 可知,在linux下生成个随机数在于输入数异或等于固定值即可,而且吧, 随机数是固定的. 先得出随机数. random=1804289383 OK,接下来用计算器异或就行啦.0xB526F ...
 - Python开发【第十篇】:RabbitMQ队列
			
简介 RabbitMQ是流行的开源消息队列系统,用erlang语言开发.RabbitMQ是AMQP(高级消息队列协议)的标准实现. 安装 首先安装erlang环境. 官网:http://www.erl ...
 - 牛客小白月赛13 小A的最短路(lca+RMQ)
			
链接:https://ac.nowcoder.com/acm/contest/549/F来源:牛客网 题目描述 小A这次来到一个景区去旅游,景区里面有N个景点,景点之间有N-1条路径.小A从当前的一个 ...
 - appium三种等待时间
			
1.强制等待(固定等待) 2.隐式等待 是appium中webdriver中自带的休眠方法,设置的是全局等待时间(在全局等待时间内之间的响应操作都会立即结束等待,然后进行操作) 3.显式等待
 - 多线程同步synchornized、volatile、Atomic、CountDownLatch示例
			
synchronized关键字 锁对象.synchronized(this)和synchronized方法都是锁当前对象. import java.util.concurrent.TimeUnit; ...
 - sort排序在苹果与安卓端不一致问题
			
一.问题 在使用sort排序时,若遇到相同数据或非数值数据时,会出现苹果手机与安卓手机排序不一致问题 var arr = [{ "id": "52", &quo ...
 - stark组件开发之组合搜索实现思路
			
- 关键字搜索. 可以做到的效果是, 输入20. 后太通过 Q() 函数. 来实现. 搜索是一个大的问题点. - 要想实现组合搜索, 首先要 明确的一点是. 在我当前的页面上, 正在进行展示的是 ...
 - H3 BPM J.V10.6.1 安装及快速使用手册
			
直接进入地址下载:http://bbs.h3bpm.com/read.php?tid=3103&fid=30,需要注册. 按照文档"H3 BPM J.V10.6.1 安装及快速使用手 ...