演示

<!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. 百度知道的php爬虫

    原文地址:百度知道的php爬虫作者:好宏杰软件 <?php class spider  {    private $content ;    private $contentlen ;    p ...

  2. bootstrap 模态框关闭状态怎么获取

    比如现在有个场景,一个事件 需要在模态框关闭之后再执行自己的逻辑,先上图: 参考官网说明:http://v3.bootcss.com/javascript/#modals-events //每次关闭模 ...

  3. html a标签 图片边框和点击后虚线框的有关问题

    html a标签 图片边框和点击后虚线框的问题 一直在在chrome上开发自己的项目,今天上ie和firefix一看,真丑,a标签在使用图片时,多加了蓝色的边框,并且点击后所有a标签都会出现一个虚线框 ...

  4. Unity3D 获得GameObject组件的方法

    Unity3D 获得GameObject组件的方法有几种,这里进行说明一下: 组件: 要获得这些组件,进行操作的话,绑定一个Movescipt 的C#组件,里面的获取方法为 void Update ( ...

  5. java 文件和流

    最近工作中涉及到一些文件操作的东西,闲下来刚好做个整理. 控制台IO 在控制台使用键盘作为标准输入并使用终端窗口(在windows下,经常是命令提示符或者是PowerShell:在linuxx/OS ...

  6. (转)Apache2 httpd.conf 配置详解 (二)

    转之--http://jafy00.blog.51cto.com/2594646/508205 DocumentRoot "/usr/local/apache-2.2.6/htdocs&qu ...

  7. 面向对象 ---Java抽象类

    在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不能实例化对象之外, ...

  8. 对于百川SDK签名验证的问题

    SDK是要在wantu.taobao.com生成的.而生成这个SDK其实是要上传一个apk,而这个上传其实就是取他的签名而已.验证就是那张yw222那张图片.重点是你上传的apk的签名是不是跟你的生成 ...

  9. error MSB6006: “CL.exe”已退出

    解决方案之一: 删除 \Windows\System32 目录下 mspdb110.dll. 试试吧.

  10. 还原data block dumps实际值

    前天看了一个案例因为丢了表上的数据,从索引block中找回了值 转储了oracle block的值,如何得到它真正表中的值,也算 是dump(val,16)的逆运算 sys@ORCL>conn ...