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

February 13, 2015

继续阅读

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

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

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

一、页面图片处理

1.延迟加载
1)所需技术:

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的一类、其他背景素材一类……
  • 归类好后,将他们分别放入一张大的png背景图片中
  • 需要使用背景的地方,通过css的background-position进行指定背景位置
2)范例
.bg1{background: url(/img/imgBg.png) no-repeat -100px -50px; overflow: hidden;}
2.需要平铺的背景图片
1)优化
  • 将横向平铺的和纵向平铺的分别归类
  • 将这些图片剪裁成等宽(横向平铺)、等高(纵向平铺)。最好宽度或者高度设为1px
  • 将这些图片放入一张大的png图片中
  • 使用css的background-position进行指定背景位置,并设置background-repeat为repeat-x或者repeat-y
2)范例
.bg2{background: url(/img/imgBg_repeatX.png) repeat-x 0px -50px;}
3.建议
1)优化
  • 定义一组公共样式:bg、repeatXBg、repeatYBg,指定背景图片路径
  • 在需要使用背景的css中直接指定background-position
2)范例

公共样式

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