演示

<!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. linux下安装apache2.2.27

    1.首先下载httpd-2.2.27.tar.gz用linux命令下载 wget http://mirrors.cnnic.cn/apache//httpd/httpd-2.2.27.tar.gz 2 ...

  2. 理解FTP协议

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/5186117. ...

  3. SharePoint Dialog 使用

    SharePoint中弹出模态窗口对体验提高太大了 方法为: 父页面中调用子页面: function showDialog() {        var options = {             ...

  4. plsql中文乱码问题（显示问号）

    问题:打开plsql,执行sql语句,中文显示乱码: 解决方案: 输入sql语句select userenv('language') from dual查看数据库字符集 输入sql语句select * ...

  5. java的集合框架之一

    java是一套很成熟的东西,很多商用的东西都喜欢用它,用的人多,稳定.不过一般也不怎么说起它,因为太常见了,私下里说,写java应用层得就像农民工,每一处都是搭积木,根据设计师的东西如何优雅地搭好积木 ...

  6. Windows环境下使用cygwin ndk_r9c编译x264

     一.废话 最近学习,第一步就是编译.我们需要编译FFmpag,x264,fdk_aac,下面是x264,网上说的很多都是几百年前的,我亲测完美可用 还是那句话 我能力有限,但是我希望我写的东西能够让 ...

  7. A题笔记（3）

    No. 1381 容器相关 #include <vector> 头文件 vector<Presents> present; present.push_back(name); 向 ...

  8. LINQ 101——分组、Set、转换、Element

    一.Grouping(分组) 例1:对于0-9数按被3整除的结果分组 代码: static void Linq1() { , , , , , , , , , }; var numModBy3 = fr ...

  9. 生产者与消费者（一）---wait与notify

    生产者消费者问题是研究多线程程序时绕不开的经典问题之一,它描述是有一块缓冲区作为仓库,生产者可以将产品放入仓库,消费者则可以从仓库中取走产品.解决生产者/消费者问题的方法可分为两类: (1)采用某种机 ...

  10. 逻辑回归：使用SGD(Stochastic Gradient Descent)进行大规模机器学习

    Mahout学习算法训练模型 mahout提供了许多分类算法,但许多被设计来处理非常大的数据集,因此可能会有点麻烦.另一方面,有些很容易上手,因为,虽然依然可扩展性,它们具有低开销小的数据集.这样一个 ...