插件描述:和 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. 遇到的[]bug

    "Runtime Error Message:reference binding to null pointer of type 'struct value_type' Last execu ...

  2. SecureCRT连接开发板 串口传输、tftp传输

    1.串口传输 使用命令:rx  r是service, x是X-model模式 ①.rx 文件名 再按Enter键 ②.将需要传到板子上的文件 拖到SecureCRT里面,选择发送X-model选项 注 ...

  3. 【iOS】値の判断

    NSString str; ){ //nilの判断 //nullの判断 //長さの判断 // ...... }

  4. model 字段参数 choice

    class Banner(NewsBase): ''' 轮播图 ''' PRI_CHOICES = [ # 优先级的限制选择范围 (1,'第一级'), (2,'第二级'), (3,'第三级'), (4 ...

  5. vue响应式原理

    vue的响应式,数据模型仅仅是普通的Javascript对象.当你修改它们时,视图会进行更新 那么如何追踪变化: 当把普通的js对象传给vue实例的data选项,Vue将遍历此对象的所有属性,并使用O ...

  6. SwipeBackLayout 右滑退出Activity

    不推荐通过添加依赖的方式来导入类库,因为本人导入后出现没法解决的问题. 这里推荐自己导入第三方库类,地址如下: https://github.com/yangzhilong00/MEvolution/ ...

  7. python基础(17)继承类和面向对象初识

    1.继承类 class Lm: money = 1000000 house = 5 def driver(self): print('会开车') class Mcb(Lm): def about_me ...

  8. java_24.1文件流的应用--复制文件

    注意:先开的流要最后关 用字节流传输 public class Demo { public static void main(String[] args){ FileInputStream fis = ...

  9. Git上传代码的步骤

    1.git status 列出来所有修改的文件2.git add 所有的文件列表,或者git add -A,添加所有文件到Add列表 3.git reset --hard 取最新的git标签 4.gi ...

  10. 20170506计划-----(基于python查询oracle语句)

    在日常的工作中,经常接到开发同事查询生产SQL的请求,公司又不允许对开发开放查询SQL的权限,并且查询的堡垒机又很慢,计划做一个可以自动查询SQL的小工具,一周内完成吧. 大概功能实现了,一些涉及敏感 ...