演示

<!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. JavaScript的DOM操作（三）

    1.相关元素操作: var a = document.getElementById("id"); var b = a.nextSibling,找a的下一个同辈元素,注意空格 var ...

  2. C#/.net七牛云存储上传图片(文件)操作

    七牛云存储官方: C#SDK(http://developer.qiniu.com/docs/v6/sdk/csharp-sdk.html) 注册成为标准用户就可获得:10GB永久免费存储空间/ 每月 ...

  3. Java SE (5)之 线程使用

    JAVA有两种线程的方法Thread 和Runnable 能够使用,这是为了弥补不能多继承的缺陷 首先是 Thread package com.sunzhiyan03; /* * 演示线程 * */ ...

  4. The hacker's sanbox游戏

    第一关:使用/usr/hashcat程序,对passwd中root的密码进行解密,得到gravity98 执行su,输入密码gravity98. 第二关:获取提供的工具,wget http://are ...

  5. 读取Excel异常定义了过多字段的解决方法

    /// <summary> /// 从Excel文件导入数据 /// </summary> /// <param name="ExcelStr"> ...

  6. javascript - 清空一个 array

    我觉得javascript不容易, 许多人觉得js容易, 因为他们觉得很容易写出常用的需求, 但是当我们实际做项目的时候, 对于javascript的要求是很高的, 特别是在性能需求方面. 我写这句话 ...

  7. C蛮的全栈之路-node篇(二) 实战一：自动发博客

    目录 C蛮的全栈之路-序章 技术栈选择与全栈工程师C蛮的全栈之路-node篇(一) 环境布置C蛮的全栈之路-node篇(二) 实战一:自动发博客 ---------------- 我是分割线 ---- ...

  8. Win32中GDI+应用（五）--GDI与GDI+编程模型的区别

    在GDI里面,你要想开始自己的绘图工作,必须先获取一个device context handle,然后把这个handle作为绘图复方法的一个参数,才能完成任务.同时,device context ha ...

  9. mysql 刘道成视频教程 第3课

    第3课: 1.mysql中条件使用关键字where: 2.查 select name,content from msg ; select name,content 控制列 where id>2 ...

  10. angularjs应用骨架(4)

    继续上一篇 继续了解angular其他内容. 与服务器交互 真正的应用需要和真实的服务器进行交互移动应用和新兴的Chrome桌面应用可能是例外.但是对于此外的所有应用来说,无论是想把数据持久化到云端还 ...