合并图片,用CSS切割以减少图片请求次数

原创 2007年09月29日 09:44:00

      为了加快页面访问速度,我们可能会想到多种可行的办法:如提升硬性条件方面的性能、减少HTTP请求次数,使用Cache,合并文件(aoao总结的把js和css合并成一个文件非常好玩)等等。

      这里主要讲一下如何节省图片的请求次数,至于如何能减少图片请求,不外乎就是减少实际图片的数量和代码的编写质量。

      我们可以把一些不经常变动的框架图片由原来分割成的多张小图合并成一张,然后通过CSS背景切割来加快完成渲染,这样就减少了实际图片的数量,也就减少了部分图片请求。

      如下面这个圆角框架的处理:

    [效果演示:http://www.doyoe.com/model/xhtmlcss/style/cssimg/1.htm

CSS部分:

html,body,h3 {
 font-family:Verdana,Arial;
 font-size:12px;
}
div {
 overflow:hidden;
}
#list {
 width:198px;
}
.top {
 background:url(skin/bg_01.gif) left top no-repeat;
}
.top h3 {
 margin:0;
 height:30px;
 line-height:30px;
 text-indent:5px;
}
.mid {
 border-left:1px solid #aaa;
 border-right:1px solid #aaa;
 padding:5px;
}
.bot {
 height:6px;
 background-position:left bottom;
}

XHTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>DY Css图片切割</title>
</head>
<body>
<div id="list">
 <div class="top"><h3>顶部边框(标题)</h3></div>
 <div class="mid">正文<br />大段正文内容</div>
 <div class="bot top"><!--底部边框--></div>
</div>
</body>
</html>

     以往做圆角的东东,一般可能会做成2,3张图片。而可以看到,这个例子仅用了一张图片,所以也会减少不少图片请求。

      先看一下CSS是如何写的:首先在.top中定义了背景图片,这是自然的,要用背景肯定得定义背景图片,这是天经地义的,这里肯定没有什么出采的地方。主要看底部的边框是如何定义的:可以看到,我为底部边框单独定义了一个.bot样式,但可以发现,里面只一个控制背景图的position样式和高度的东东,甚至连背景图也没定义,此疑问一?

      暂且放下css不看,先看xhtml部分的底部是如果写的,可以看到,我为底部赋了两个样式class="bot top"。这也就解了疑问一的惑,为什么.bot里面连背景图也不定义,只定义一个位置和高。这是因为.top里面已经定义了背景图,所以只需要在底补同时引用.top和.bot两个样式就行了,它会同时被这两个样式渲染。

      这样写就省下了在.bot里再定义一次背景,减少了一次图片请求,也减少了不少字节哦:)

      再一个疑问就是中间部分是如何解决边框问题的。可以看到,只需要定义左右两边的border就可以搞定。

      至此,关于合并图片,并利用CSS进行背景切割以减少请求的简单例子就搞定了。

 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

减少请求最有效方法:CSS Sprites 图片合并技术

假如我们想截取高100px 宽800px 中X坐标:200px,Y坐标:0px;Width:20px;Height:20px;图片名称:1.gifbackground:url(1.gif):导入图片 ...

Gulp压缩、合并js/css文件,压缩图片以及热更新教程

Gulp压缩教程:(需全局安装gulp $ npm install gulp -g) 1、cdm进入项目根目录 npm init(生成一个package.json,保存当前项目的依赖) 2、安装相关...

CSS之图片的合并及使用

作为一个开发人员前后台一并开发是常有的事.

Gulp压缩合并js/css文件,压缩图片,以及热更新教程

var gulp = require('gulp'); var concat = require('gulp-concat');//- 多个文件合并为一个; var minifyCss = requi...

图片合并 减少 http 请求

代码如下:  复制代码 代码如下:                 注意:这五个按钮分别使用了五张图片  那么,五张图片就意味着你的该页面又多了五...

减少HTTP请求之合并图片详解(大型网站优化技术)

一、相关知识讲解   看过雅虎的前端优化35条建议,都知道优化前端是有多么重要。页面的加载速度直接影响到用户的体验。80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件...

设置volley请求次数,上传图片显示上传两次,设置volley默认请求次数

今天在做上传图片的时候,发现一次调用volley请求进行两次上传,经过查资料得知,volley在开始默认两次联网请求,如果后台没有做相应处理,则会发送两次图片,所以造成重复,后来查资料知道通过一个方法...

减少HTTP请求之合并图片详解(大型网站优化技术)

一、相关知识讲解  看过雅虎的前端优化35条建议,都知道优化前端是有多么重要。页面的加载速度直接影响到用户的体验。80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)