管理好页面图片，减少页面加载时http连接，优化页面

 

浏览器渲染页面的时候，遇到图片标签或者css中的背景图片设置，先会到本地缓存中寻找是否已经下载了这张图片，如果已经下载过了就直接从缓存中加载；否则会到图片指定的路径下载到本地缓存。而且这种下载是阻塞式的（部分浏览器内核已经实现异步加载图片。比如火狐）。也就是说在下载这些图片的时候，页面渲染处于暂停状态，必须等到图片下载完成了再继续渲染。

所以，如果一个页面中有大量的图片需要加载，先不说图片本身的大小对下载速度的消耗，每次图片下载都是一次http请求，都要经历3次协议握手，这对页面加载速度的影响是显而易见的！！如果图片再大一点，每张一两百K，杯具了……

 

那么如何管理这些页面图片、背景图片以加快页面渲染速度呢？下面，我将我的一些经验分享给大家。

 

一、    页面图片处理

1.     延迟加载

1)    所需技术: lazyload(下载地址: http://www.appelsiini.net/projects/lazyload)

2)     原理：先使用一种空白的图片grey.gif代替指定的图片元素（lazyLoad允许指定页面上那些图片需要延迟加载。比如$("img.lazy").lazyload()表示class为lazy的图片延迟加载。$("img ").lazyload()表示所有图片都延迟加载）。当页面滚动条滚动到该图片时，再将图片的src还原。

       有时，你可能浏览某些网页时，滚动页面滚动条时发现有些图片显示为正在加载。就是使用这种技术实现的。

3)     使用：

 

<img src="test.jpg" alt=""/>

 

 

jQuery(document).ready(function() {
	$("img").lazyload();//更多的配置请参考官网
});

 

注意：lazyload好处在于并不会影响页面元素的开发。你不需要在img标签上附加任何的配置。lazyLoad会自动将图片的src设置为空白图片 grey.gif。

 

2.  异步加载

1) 原理：异步加载跟延迟加载有点不一样。延迟加载是当滚动条滚动到图片位置时，重新加载图片；而异步加载就是页面加载完成后，将指定的图片重新加载。

跟延迟加载一样，需要将图片的src属性先指定为一张空白的图片。然后将图片本来的地址放入 lazyload 属性（属性名称可以自己定义）。页面加载完成后，使用javascript将图片的src属性替换为data属性的地址。

这有点像是在模拟火狐浏览器异步加载图片的行为，呵呵。

2)范例：

 

<img src="grey.gif" alt="" lazyload="test.jpg"/>

  注意：这里需要事先将src属性设置为grey.gif，并将真实的src放入lazyload属性。

下面使用javascript替换src：

 

jQuery(document).ready(function() {
	$("img:[lazyload]").each(function(){
		$(this).attr("src",$(this).attr("lazyload"));
	});
});

 

 

 

二、       背景图片处理

1.    不需要平铺的背景图片

1)     将这些图片进行归类，icon的一类、button的一类、其他背景素材一类……

2)     归类好后，将他们分别放入一张大的png背景图片中

3)     需要使用背景的地方，通过css的background-position进行指定背景位置

4)     范例

 

.bg1{background: url(/img/imgBg.png) no-repeat -100px -50px; overflow: hidden;}

 

2.   需要平铺的背景图片

1)   将横向平铺的和纵向平铺的分别归类

2)   将这些图片剪裁成等宽（横向平铺）、等高（纵向平铺）。最好宽度或者高度设为1px

3)   将这些图片放入一张大的png图片中

4)   使用css的background-position进行指定背景位置，并设置background-repeat为repeat-x或者repeat-y

5)    范例

 

.bg2{background: url(/img/imgBg_repeatX.png) repeat-x 0px -50px;}

     

3.     建议

1)     定义一组公共样式：bg、repeatXBg、repeatYBg，指定背景图片路径

2)     在需要使用背景的css中直接指定background-position

3)     范例

公共样式

 

.bg{background: url(/img/background/base.png) no-repeat left top; overflow: hidden;}
.repeatXBg{background: url(/img/background/base_repeatX.png) repeat-x left top;}
.repeatYBg{background: url(/img/background/base_repeatY.png) repeat-y left top;}

  页面样式：

 

bg1{background-position: 0px -33px; }
repeatXBg1{background-position: 0px -33px; }
repeatYBg1{background-position: -33px 0px; }

 html：

 

<div class="bg bg1"></div>
<div class="repeatXBg repeatXBg1"></div>
<div class="repeatYBg repeatYBg1"></div>

 

 

已有 4 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐

• —软件人才免语言低担保 赴美带薪读研！—