插件描述:和 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的更多相关文章

  1. 简单的Javascript图片延迟加载库Echo.js

    简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...

  2. JavaScript语法高亮库highlight.js使用

    highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库 ...

  3. javascript模块化编程库require.js的用法

    随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...

  4. ECHO.js 纯javascript轻量级延迟加载

    演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf ...

  5. 如何使用echo.js实现图片的懒加载(整理)

    如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...

  6. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  7. 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)

    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...

  8. echo.js 延迟加载图片控件

    echo.js的github地址:https://github.com/toddmotto/echo   echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...

  9. 延迟加载图片控件--echo.js

    echo.js的github地址:https://github.com/toddmotto/echo   echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...

随机推荐

  1. LinkedHashMap 根据PUT顺序排序Map

    最近工程里面报表需要合计 , 因为所有的项都是动态的,所以只能动态添加. 思路是使用Map,初始化所有Map,然后在Map中合计并且覆盖. 使用HashMap , 初始化后所有动态项的顺序都乱了. M ...

  2. css3-study-new

    不错的:http://c7sky.com/works/css3slides/#28

  3. pwnable.kr-random-witeup

    看源代码. 可知,在linux下生成个随机数在于输入数异或等于固定值即可,而且吧, 随机数是固定的. 先得出随机数. random=1804289383 OK,接下来用计算器异或就行啦.0xB526F ...

  4. Python开发【第十篇】:RabbitMQ队列

    简介 RabbitMQ是流行的开源消息队列系统,用erlang语言开发.RabbitMQ是AMQP(高级消息队列协议)的标准实现. 安装 首先安装erlang环境. 官网:http://www.erl ...

  5. 牛客小白月赛13 小A的最短路(lca+RMQ)

    链接:https://ac.nowcoder.com/acm/contest/549/F来源:牛客网 题目描述 小A这次来到一个景区去旅游,景区里面有N个景点,景点之间有N-1条路径.小A从当前的一个 ...

  6. appium三种等待时间

    1.强制等待(固定等待) 2.隐式等待 是appium中webdriver中自带的休眠方法,设置的是全局等待时间(在全局等待时间内之间的响应操作都会立即结束等待,然后进行操作) 3.显式等待

  7. 多线程同步synchornized、volatile、Atomic、CountDownLatch示例

    synchronized关键字 锁对象.synchronized(this)和synchronized方法都是锁当前对象. import java.util.concurrent.TimeUnit; ...

  8. sort排序在苹果与安卓端不一致问题

    一.问题 在使用sort排序时,若遇到相同数据或非数值数据时,会出现苹果手机与安卓手机排序不一致问题 var arr = [{ "id": "52", &quo ...

  9. stark组件开发之组合搜索实现思路

    - 关键字搜索. 可以做到的效果是, 输入20. 后太通过 Q()  函数. 来实现.  搜索是一个大的问题点. -  要想实现组合搜索, 首先要 明确的一点是. 在我当前的页面上, 正在进行展示的是 ...

  10. H3 BPM J.V10.6.1 安装及快速使用手册

    直接进入地址下载:http://bbs.h3bpm.com/read.php?tid=3103&fid=30,需要注册. 按照文档"H3 BPM J.V10.6.1 安装及快速使用手 ...