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

点我查看原文

       浏览器渲染页面的时候，遇到图片标签或者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>