ECHO.js 纯javascript轻量级延迟加载
演示
<!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轻量级延迟加载的更多相关文章
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- 简单的JavaScript图像延迟加载库Echo.js
插件描述:和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQu ...
- 简单的Javascript图片延迟加载库Echo.js
简介: 和 Lazy Load 一样,Echo.js 也是一个用于图像延迟加载 JavaScript.不同的是 Lazy Load 是基于 jQuery 的插件,而 Echo.js 不依赖于 jQue ...
- 延迟加载外部js文件，延迟加载图片（jquery.lazyload.js和echo,js）
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- echo.js 延迟加载图片控件
echo.js的github地址:https://github.com/toddmotto/echo echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...
- 延迟加载图片控件--echo.js
echo.js的github地址:https://github.com/toddmotto/echo echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...
- 翻译连载 |《你不知道的JS》姊妹篇 |《JavaScript 轻量级函数式编程》- 引言＆前言
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 译者团队(排名不分先后):阿希.blueken.brucec ...
- 翻译连载 | 第 11 章：融会贯通 －《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 附录 A：Transducing（下）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
随机推荐
- python learning_curve函数
这个函数需要引用sklearn包 import sklearn from sklearn.learning_curve import learning_curve 这个函数的调用格式是: learni ...
- JS2 for应用
for应用 再谈js获取元素一二: var oUl=document.getElementById('list'); //静态方法 var oUl=document.getElements ...
- (转)META http-equiv="refresh" 实现网页自动跳转
***.html自动跳转文件代码如下: <HTML> <HEAD><META http-equiv="Refresh" content="5 ...
- GCDTimer
#import <Foundation/Foundation.h> @interface JKTimerManager : NSObject + (instancetype)sharedT ...
- iphone"此证书是由未知颁发机构签名的"的解决办法
由于误删除,将开发证书给弄没了,导致Certificates中更新的证书都提示此证书是由未知颁发机构签名的,不能实机调试,解决办法是重新下载AppleWWDRCA.cer 地址是:http://dev ...
- asp.net mvc Ajax服务器跳转
1.过滤器权限验证 [AttributeUsage(AttributeTargets.Method | AttributeTargets.Class, Inherited = true, AllowM ...
- wel
欢迎来到mathant.com 这个网站是什么 这个网站是我搭建在阿里云vps上的个人网站.目前的用途是充当个人博客和云存储,当然它的功能不止如此.我会在以后的日子里完善他,希望他能变得更好.目前我在 ...
- 对装饰模式(Decorator)的解读
看过好多对装饰模式的讲解,他们几乎都有一句相同的话:对现有类功能的扩展.不知道大家怎么理解这句话的,之前我把”对功能的扩展“理解成”加功能=加方法“,比如Person类本来有两个功能:Eat 和 Ru ...
- PHP的类自动加载机制
在PHP开发过程中,如果希望从外部引入一个class,通常会使用include和require方法,去把定义这个class的文件包含进来. 这个在小规模开发的时候,没什么大问题.但在大型的开发项目中, ...
- 【python之旅】python的模块
一.定义模块: 模块:用来从逻辑上组织python代码(变量.函数.类.逻辑:实现一个功能),本质就是以.py结尾的python文件(文件名:test.py ,对应的模块名就是test) 包:用来从逻 ...