演示

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<title>简单的JavaScript图像延迟加载库Echo.js</title>

<style>

.demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;}

</style>

</head>

<body>

<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">简单的JavaScript图像延迟加载库Echo.js演示</h1>

<div class="demo" style="width: 736px; margin: 0 auto;">

	<img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg">

	<img class="lazy" src="images/blank.gif" data-echo="images/big-2.jpg">

	<img class="lazy" src="images/blank.gif" data-echo="images/big-3.jpg">

	<img class="lazy" src="images/blank.gif" data-echo="images/big-4.jpg">

	<img class="lazy" src="images/blank.gif" data-echo="images/big-5.jpg">

	<img class="lazy" src="images/blank.gif" data-echo="images/big-6.jpg">

	<img class="lazy" src="images/blank.gif" data-echo="images/big-7.jpg">

</div>

<script src="js/echo.min.js"></script>

<script>

Echo.init({

	offset: 0,

	throttle: 0

});

</script>

应用

1.引入js,并初始化

<script src="{sh::PUB}js/echo.min.js"></script>

<script>

Echo.init({

    offset: 0,

    throttle: 0

});

</script>

2.给图片附上属性

<img class="lazy" src="{sh::PUB}img/common/blank.gif" data-echo="{sh:$goods.logoimg}" alt="">

3.给未加载的图片设置默认背景，动态的gif

.lazy{width:100%;height:100%;background: url({sh::PUB}img/common/loading.gif) 50% no-repeat;}

很方便，很实用。

要想进一步提升网页打开速度，可以优化上传的图片。

网页慢，无非是，一查询慢，二图片加载慢，三没有使用延迟加载，四图片数据太大。

根据这些原因，逐步解决。

提升用户体验。

ECHO.js 纯javascript轻量级延迟加载的更多相关文章

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

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

  2. 简单的JavaScript图像延迟加载库Echo.js

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

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

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

  4. 延迟加载外部js文件，延迟加载图片（jquery.lazyload.js和echo,js）

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

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

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

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

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

  7. 翻译连载 |《你不知道的JS》姊妹篇 |《JavaScript 轻量级函数式编程》- 引言＆前言

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 译者团队(排名不分先后):阿希.blueken.brucec ...

  8. 翻译连载 | 第 11 章：融会贯通 －《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  9. 翻译连载 | 附录 A：Transducing（下）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

随机推荐

  1. log4j的properties详细配置，分级输出日志文件

            log4j是很常用的日志类包,在此做一下配置的记录 加载jar包和properities配置文件             将commons-logging.jar和logging-lo ...

  2. ueditor 添加微软雅黑字体 异常“从客户端中检测到有潜在危险的 request.form值”，解决

    使用ueditor往数据库添加文本内容时,如果字体有css样式, <,>," 这些字符会导致报出异常信息:从客户端中检测到有潜在危险的 request.form值 因为这些字符有 ...

  3. 3DES加解密【示例】

    代码 /**  * 3DES加解密  */ public class DESedeUtils {     private static final String ALGORITHM_MD5 = &qu ...

  4. day-9

    /* 考前第9天 区间*的线段树居然卡住了23333 明天再搞搞 今天针对考试复习了几个板子 手动堆都打了 实测比priority快 下午考试成了炮灰233333 晚上复习矩阵乘法 手推9*9矩阵 可 ...

  5. pc机安装centos6.5，提示sda必须有一个GPT磁盘标签处理

    1.在进入安装界面,也就出现图形界面时,对它命令首先创建gpt --按ctrl+alt+f2的组合键,然后进入命令行 --进行如下操作输入parted输入mklabel gpt /dev/sda在提示 ...

  6. LINQ 101——约束、投影、排序

    什么是LINQ:LINQ 是一组 .NET Framework 扩展模块集合,内含语言集成查询.集合以及转换操作.它使用查询的本机语言语法来扩展 C# 和 Visual Basic,并提供利用这些功能 ...

  7. 使用JsPlumb绘制拓扑图的通用方法

    转自:http://www.it165.net/pro/html/201311/7616.html 使用JsPlumb绘制拓扑图的通用方法 一. 实现目标 绘制拓扑图, 实际上是个数据结构和算法的问题 ...

  8. php多线程即时通讯

    即时通讯:推送消息http://www.workerman.net/

  9. window.frameElement属性

    比如有一个iframe的src是xxx.htm frameElement的作用就是在xxx.htm中获得这个引用它的iframe objet 这样你就可以在xxx.htm改变iframe的大小,或是边 ...

  10. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...