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

标签: 管理 页面 图片 | 发表时间:2012-09-05 10:07 | 作者:
出处:http://www.iteye.com

 

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



相关 [管理 页面 图片] 推荐:

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

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

CSS页面重构“鑫三无准则”之“无图片”准则

- jessie - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1652. “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过. 这是自己在页面重构的经验中总结出来的一套约束自己CSS的准则,即“无宽度”、“无图片”和“无浮动”,目的是使CSS布局模块化以及增强可扩展性.

解析web网页并保存页面中的图片

- - Marshal's Blog
这个功能,是很多类似爬虫的应用需要实现的. 如果使用node.js,你会惊讶的发现,这个任务实现起来很容易,就象写嵌入在页面中的javascript一样. 建议没接触过node.js的,可以先看看 node.js能干什么. ,里面已经包含了最简单的解析web网页的功能. 这次做的是更具体的事情,我想把维基百科的坦克词条文章抽取出标题和一个图片:.

如何高效使用和管理Bitmap--图片缓存管理模块的设计与实现

- - CSDN博客移动开发推荐文章
传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229.         上周为360全景项目引入了图片缓存模块. 因为是在Android4.0平台以上运作,出于惯性,都会在设计之前查阅相关资料,尽量避免拿一些以前2.3平台积累的经验来进行类比处理.

Google即时页面、桌面语音搜索和上传图片搜索让搜索更快速

- Brant - 36氪
在今天的「Inside Search」大会上,Google发布了一些新功能,包括对桌面语音搜索的支持,新的手机版界面,通过图片来搜索,以及即时页面(Instant Pages)等. 从桌面拖一张图片到搜索框,Google会试图验证并返回相关的结果,Google说这个技术很像手机上的Google Goggles,但是为桌面体验重新设计了.

管理

- - 人月神话的BLOG
对于中小企业而言现在管理上欠缺的不是人治或者说儒家佛家等东方管理思想,而真正欠缺的是西方法治的科学管理方法. 现在很多中小企业花很多钱去听什么东方管理思想的培训是误入歧途,东西方管理思想需要融合,但是基础还是科学的管理方法和模式. 而在这个里面最重要的仍然是流程管理,知识管理,质量管理,项目管理这些内容,而不是简单的纯管理.

REDO管理

- - CSDN博客数据库推荐文章
一、什么是REDO LOG.  REDOLOG文件是十分重要的文件,它记录了Oracle的所有变化,是数据库实例恢复机制中最为关键的组成部分.     GROUP#    THREAD#  SEQUENCE#      BYTES  BLOCKSIZE    MEMBERS ARC STATUS           FIRST_CHANGE# FIRST_TIME     NEXT_CHANGE# NEXT_TIME.

日志管理

- - CSDN博客系统运维推荐文章
#很关键 [root@client01 ~]# ls /var/log/ anaconda.ifcfg.log. tallylog #关键日志,大部分记录在里面 [root@client01 ~]# ls /var/log/messages /var/log/messages. [root@client01 ~]# ps -ef|grep log #系统日志服务 root.

Web页面入门

- - 可咔酷 | 网络杂货铺
开发页面在很多人眼里很简单,大部分的人都会说不就是把效果图变成网页嘛,哪里需要那么多的时间,一点技术含量都没有. 确实html页面没有js那么多复杂的交互,也不需要和后台数据打交道,但并不能代表就没有技术含量,也不是人人都能做好的. 页面结构好坏直接会影响到css代码的质量,也会影响js和后台的开发,还会影响到以后功能的扩展和代码的优化.

分享图片

- 糖果 - 变态辣椒的时政漫画