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 ...

随机推荐

高效删除 ListItem
The most efficient way to a lot of transaction in SharePoint is using of SPWeb.ProcessBatchData meth ...
jQuery 取值、赋值的基本方法【转藏】
/*获得TEXT.AREATEXT的值*/ var textval = $("#text_id").attr("value"); //或者 var textva ...
[XML] Resource帮助类
点击下载 Resources.rar /// <summary> /// 类说明:Resources /// 编码人:苏飞 /// 联系方式:361983679 /// 更新网站:[u ...
iis最大连接数和队列长度
最近公司项目的服务器出现了性能问题,关于iis负载过大,当客户问到最大连接数相关问题造成很萌的感觉,就查了相关资料: 首先让我们来看看IIS里面的这2个数字:最大并发连接数,队列长度.先说这2个数字在 ...
CSS 创建
当读到一个样式表时,浏览器会根据它来格式化 HTML 文档. 如何插入样式表插入样式表的方法有三种: 外部样式表内部样式表内联样式外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选 ...
ios专题－斯坦福大学iOS开发公开课总结
转自:http://blog.devtang.com/blog/2012/02/05/mvc-in-ios-develop/ 前言 iphone开发相关的教程中最有名的,当数斯坦福大学发布的”ipho ...
C语言基础程序设计
1 概论程序(指令和数据的集合)在运行时,首先会被加载到内存(此时称为进程),然后由CPU通过控制器的译码从内存中读取指令,并按照指令的要求,从存储器中取出数据进行指定的运算和逻辑操作等加工,然后再 ...
343. Integer Break -- Avota
问题描述: Given a positive integer n, break it into the sum of at least two positive integers and maximi ...
pc110301QWERTYU
水题一道,SOLVED只是次数的问题.map一下,就是很easy啦. #include<iostream> #include<cstdio> #include<cstri ...

ECHO.js 纯javascript轻量级延迟加载

ECHO.js 纯javascript轻量级延迟加载的更多相关文章

随机推荐

热门专题