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 ...
随机推荐
- Linux Bash算数运算方法小结
A= B= 方法1:let(中间无空格) let C=$A+$B 方法2:$[ ] C=$[$A+$B] 方法3:$(()) C=$(($A+$B)) 方法4:expr(中间有空格) C=`expr ...
- jstl中添加自定义的函数
由于jstl中提供的函数未必能够满足我们的要求,而我们又希望能够像jstl提供的函数那样能够轻松方便使用,那么可以通过自定义函数补充jsltl函数.给jstl添加自定义函数需要以下步骤: 定义一个st ...
- zTree在Asp.Net中的使用
前台代码: <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css" type=&qu ...
- 使用原生JS编写ajax操作XMLHttpRequst对象
ajax其本质就是XMLHttpRequest,现在jquery调用异步的方法很方便,但是也不能忘记原生的JS去编写ajax; 需要注意的是,很多人在写的时候喜欢只用XMLHttpRequest对象r ...
- Windows phone 之Interaction.Triggers的使用
两个步骤:1.添加以下两个程序集System.Windows.InteractivityMicrosoft.Expression.Interactions 2.添加xmlns:i="clr- ...
- LVS 介绍以及配置应用
1.负载均衡集群介绍 1.1.什么是负载均衡集群 负载均衡集群提供了一种廉价.有效.透明的方法,来扩展网络设备和服务器的负载.带宽.增加吞吐量.加强网络数据的处理能力.提高网络的灵活性和可用性 搭建负 ...
- 《paste命令》-linux命令五分钟系列之二十
本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...
- 《wc》-linux命令五分钟系列之十七
本原创文章属于<Linux大棚>博客,博客地址为http://roclinux.cn.文章作者为rocrocket. 为了防止某些网站的恶性转载,特在每篇文章前加入此信息,还望读者体谅. ...
- 一个简单的Hibernate工具类HibernateUtil
HibernateUtil package com.wj.app.util; import org.hibernate.Session; import org.hibernate.SessionFac ...
- Discuz论坛下载与安装
Part1 Discuz下载 百度“discuz下载” 2. 找到下图这里 3. 选择你需要的版本,这里我选了X3.1版 4. 选择UTF-8简体下载 这是我下载好的文件 Part2 Discuz安装 ...