echo.js 延迟加载图片控件

echo.js的github地址:https://github.com/toddmotto/echo

echo是一个独立的JavaScript、轻量级的、延迟图片加载插件,echo压缩后体积不到1k,使用html的标准data-*属性,echo支持IE8+。

使用echo.js非常简单,在网页需要延迟加载的img标签中,设置data-echo属于指向需要加载的图片路径,src属性指向默认加载图片路径。然后引入echo.min.js,并初始化echo即可。

<script src="echo.min.js"></script>
<script>
     echo.init({
         // options初始化参数
     });
</script>
<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">

options :

offset  默认值为0。设置上下左右到viewport的距离多少才加载图片。

offsetVertical  默认值为0。设置上下到viewport的距离是多少才加载图片。

offsetHorizontal  默认值为0。设置左右到viewport的距离是多少才加载图片。

offsetTop  默认值为offsetVertical。设置顶部距离viewport的距离

offsetButton  默认值为offsetVertical。设置顶部距离viewport的距离

offsetLeft  默认值为offsetVertical。设置左边距离viewport的距离

offsetRight  默认值为offsetVertical。设置右边距离viewport的距离

throttle 单位毫秒 设置图片延迟加载时间,通俗点说就是函数调用的频度控制器,是连续执行时间间隔控制。主要应用的场景比如:鼠标移动,mousemove事件;DOM元素动态定位,window对象的resize和scroll事件。

debounce 单位布尔值,默认true,      unload 单位布尔值,默认false。该选项告诉echo,当图片滑动超过了viewport的时候不在加载该图片。

callback 单位函数,回调函数会传递已更新的元素和操作(load或者unload)给回调函数。

同时,通过调用echo.reader()函数模式scroll函数,触发echo加载图片。

时间: 2024-10-27 09:07:40

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

JS模拟select控件的代码

用JavaScript模拟实现Select下拉选框功能,在本效果的实现上,背景图片起到了非常重要的美化作用,然后用CSS和JS分别对LI进行控制,最终实现漂亮的Select效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

js操作select控件大全(包含新增、修改、删除、选中、清空、判断存在等)

原文:js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js 代码// 1.判断select选项中 是否存在Value="paraValue"的Item        function jsSelectIsExitItem(objSelect, objItemValue) {            var isExit = false;            for (var i

用js给html控件赋值

用js给html控件赋值 <script> window.onload=function setValue()//在页面加载时赋值 { document.getElementById("你要赋值的控件ID").value=你需要赋的值; //$("#aa").html('给html赋值'); //document.getElementById('aa').innerText='给html赋值'; //document.getElementById('aa

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

图片控件Picture Control 本节主要讲一种简单实用的控件,图片控件Picture Control.我们可以在界面某个位置放入图片控件,显示图片以美化界面. 图片控件简介 图片控件和前面讲到的静态文本框都是静态文本控件,因此两者的使用方法有很多相同之处,所属类都是CStatic类,有关成员函数已在前面介绍,这里就不重复了. 图片控件静态和动态加载图片 鸡啄米下面为大家演示如何为图片控件静态和动态加载位图图片. 1. 图片控件静态加载图片 1)创建一个基于对话框的MFC工程,名称设置为“

JS获取时间控件

引用JS文件: <script src="../js/my97/WdatePicker.js" type="text/javascript"></script> <script> function chkAddAction(){ var starttime = $.trim($('#starttime').val()); var endtime= $.trim($('#endtime').val()); if(starttime

MFC 学习之 模态对话框图片控件上作图

首先说明一点,onpaint 是更新面板用的,作图的话应在控件上进行. 新建 MFC 对话框工程,面板上添加按钮 IDC_START , IDC_SHOW , IDC_STOP 添加两个对话框,ID 分别设为(简写)ld 和 cd. ld 上添加三个图片控件,并且每一个均关联一个 CSTATIC 型变量. cd 上添加一个图片控件,操作如上. 分别为两个对话框添加类,名称自己设,我的是 CLineDlg 和 CCompDlg . 主对话框头文件中包含两个类的头文件. 添加声明: CLineDlg

为OLED屏增加GUI支持5:图片控件

本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN10 开发环境:MDK5.13 MCU:STM32F103 说明: 本文定义了图片控件.OLED屏是单色屏,所以本图片控件支持的是单色BMP图像. 将普通图像转换为单色图片可以用工具BmpCvt.exe.将转换后的BMP图像转换为hex文件,可以用Bin2C.exe.这两个工具都是emwin自带工具. 源代码: 转换后的hex文件再整理成如下的示例格式: battery0.c /*

ADF控件ID变化引发JS无法定位控件的解决方法

原文地址:ADF控件ID变化引发JS无法定位控件的解决方法作者:Nicholas JSFF定义的控件ID到了客户端时往往会改变.例如在JSFF中的一个的ID为"ot1",但是当这个JSFF被嵌入TaskFlow中,并以Region的方式在页面展示时,在浏览器中,此控件的ID就会变成"r1:0:ot1". ADF动态修改控件ID的原因其实是为了提供重用性的同时防止控件ID的冲突.试想如果有两个JSFF中分别都有一个,其ID均为ot1,那么当这两个JSFF被引入同一个页

自定义圆角图片控件(Xfermode方式)

苹果都放弃自己的棱角了... 看惯了方方正正的图片,乍一看到圆角图片觉得挺漂亮的.可当满世界都是圆角图片的时候,我又开始怀念那些棱角了~之前仓促的写过一个,今天拿过来又修改了一下,现在贴在这里,以方便以后ctrl+c.ctrl+v~~~~~ 一.目标 自定义一个图片控件,有圆形和圆角两种选择.控件的行为和ImageView一致! 二.思路 扩展ImageView控件,重写其onDraw方法.一开始还想重写onMeasure方法,如果显示圆形图片强制宽高相等,没能行得通(代码中会说明).圆角图片以