echo.js的github地址:https://github.com/toddmotto/echo
 
echo是一个独立的JavaScript、轻量级的、延迟图片加载插件,echo压缩后体积不到1k,使用html的标准data-*属性,echo支持IE8+。
 
 
一般将其放在滚动事件的下面:
<img class="lazy" src="tool/img.gif" :data-echo="i.url"/>
使用echo.js非常简单,在网页需要延迟加载的img标签中,设置data-echo属于指向需要加载的图片路径,src属性指向默认加载图片路径。然后引入echo.min.js,并初始化echo即可。

echo.init({
  offset: 0,
  throttle: 0 ,
  unload: false,
  callback: function (element, op) {
    console.log(element, 'has been', op + 'ed');//element是延迟加载的对象;
  }
});

常用参数及方法说明

参数 描述 默认值
offset 离可视区域多少像素的图片可以被加载 0
throttle 图片延迟多少毫秒加载 250
debounce 防抖动 true
unload 告诉echo是加载还是卸载视图中的图片,当图片离开视图区域时触发 false
callback 回调函数,用来检测图片是否加载 function()

最后echo.js还提供了一个.render()方法,用法如下:

echo.render();

应用场景:当你的页面没有发生滚动,而你想加载即将要显示的图片,如图片轮播,当第一张图片显示完,接着滑动展示第二张图片,这个时候使用echo.render();提前加载第二张图片,就不会出现图片加载卡顿白屏等现象。

 

延迟加载图片控件--echo.js的更多相关文章

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

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

  2. 『Asp.Net 组件』Asp.Net 服务器组件 内嵌图片:自己的图片控件

    代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...

  3. MFC编程入门之二十七(常用控件:图片控件PictureControl)

    上一节讲的是滚动条控件,本节主要讲一种简单实用的控件,图片控件Picture Control.我们可以在界面某个位置放入图片控件,显示图片以美化界面. 图片控件简介 图片控件和前面讲到的静态文本框都是 ...

  4. C#中在AxWebBrowser控件注入JS脚本的方法

    /// <summary> /// 窗体加载 /// </summary> private void JS_Load(object sender, EventArgs e) { ...

  5. wxPython缩放图片控件的一个小例子

    前几天写程序的时候,想有个自适应的图片控件,但是一直没有找到合适的解决方案.今天终于解决了这个问题,发在这里,以供参考. 程序截图: 文件下载地址: http://files.cnblogs.com/ ...

  6. VB.NET让webbrowser控件中JS脚本错误最新方法(2013-09-16)

    最近也是在项目中遇到了webbrowser控件中想关闭JS脚本错误窗口的问题,所以经过多次测试,终于用一段高效实用的代码完美解决webbrowser控件中JS脚本错误窗口关闭的问题. 通过创建一个子线 ...

  7. VS2010/MFC常用控件:图片控件Picture Control

    图片控件Picture Control 本节主要讲一种简单实用的控件,图片控件Picture Control.我们可以在界面某个位置放入图片控件,显示图片以美化界面. 图片控件简介 图片控件和前面讲到 ...

  8. 国籍控件(js源码)

    国籍控件(js源码) 一直苦于没有好的国籍控件可以用,于是抽空写了一个国籍控件,现分享给大家. 主要功能和界面介绍 国籍控件主要支持中文.英文过滤以及键盘上下事件. 源码介绍 国籍控件核心是两个文件, ...

  9. 安卓开发:UI组件-图片控件ImageView(使用Glide)和ScrollView

    2.7ImageView 2.7.1插入本地图片 一个图片控件,可以用来显示本地和网络图片. 在首页添加按钮ImageView,指向新页面(步骤与前同,不再详写). activity_image_vi ...

随机推荐

  1. Angular1.x 基础总结

    官方文档:Guide to AngularJS Documentation   w3shools    angularjs教程  wiki   <AngularJS权威教程> Introd ...

  2. IT之路如何走得更远

    作者:石头2075链接:http://www.jianshu.com/p/8c6417e16505著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 首先,你需要在合适的年纪进入了这 ...

  3. asp.net session 保存实体类对象

    存:User user=new User();session["USER"]=user; 取:User u= (User ) session["USER"];

  4. Windows Server 2008 R2 /2012 修改密码策略(摘抄 原文地址 https://www.cnblogs.com/mili3/p/7799347.html)

    今天建了域环境,在添加新用户的时候,发现用简单的密码时域安全策略提示密码复杂度不够,于是我就想在域安全策略里面把密码复杂度降低一点. 问题:    在“管理工具 >> 本地安全策略 > ...

  5. 快速设置UITableView不同section对应于不同种类的cell

    快速设置UITableView不同section对应于不同种类的cell 本文主要是为了写明如何在UITableView中,一个section对应于一种类型的cell,写起来不凌乱. 在不封装任何类的 ...

  6. Linux入门-3 Linux磁盘及文件系统管理

    1. 磁盘基本概念 1.1 磁盘结构:盘片(单碟vs多碟).磁头(读写数据) 1.2 磁盘在Linux中的表示 1.3 分区概念 2 使用fdisk进行磁盘管理 3 Linux文件系统 mke2fs ...

  7. 搭建企业级全网数据定时备份方案[cron + rsync]2

    1.1.1. rsync服务注意的问题 1.服务端 path=/backup/     -->带/ 2.客户端 rsync -avz /tmp/ rsync_backup@192.168.25. ...

  8. 重装win7系统的过程

    U盘重装系统准备工作: 1.下载一个制作U盘系统的软件,随便哪个都行,把U盘变成系统盘 2.下载镜像,将镜像copy到系统盘内即可(无需解压) 3.进入BIOS系统,将boot进行设置,将U盘设置为第 ...

  9. P2258 子矩阵

    题目描述 给出如下定义: 子矩阵:从一个矩阵当中选取某些行和某些列交叉位置所组成的新矩阵(保持行与列的相对顺序)被称为原矩阵的一个子矩阵. 例如,下面左图中选取第 222 . 444 行和第 222 ...

  10. 26、springboot与消息

    概述: 1.大多应用中,可通过消息服务中间件来提升系统异步通信.扩展解耦能力消息服务中两个重要概念:           2.消息代理(message broker)和目的地(destination) ...