OneImage

M@dHatter

4.88/5 (31投票s)

2009年2月28日

CPOL

6分钟阅读

80735

1069

一个httpmodule，用于将多个图像合并为一个，以加快加载速度并减少Web服务器的HTTP请求。该模块会生成自动CSS图像映射位置，用于在网页上显示背景定位。该模块还处理创建鼠标悬停图像效果。

引言

本文介绍了一个httpmodule，旨在将多个图像合并为一个，以加快加载速度并减少Web服务器的HTTP请求。该模块会生成自动CSS图像映射位置，用于在网页上显示背景定位。该模块还处理创建鼠标悬停图像效果。该模块旨在与ASP.NET网站一起运行，并使用web.config来控制图像和CSS目录。它还可以追加到现有的CSS文件中，而不是创建新的文件，以保持旧网页CSS的完整性。

通用用法和理由

实现此代码的通用目的是通过消除多个图像HTTP请求来提高Web服务器响应时间。当客户端通过浏览器访问您的网站时，他们会逐一请求您网页的所有图像。如果您有很多图像，就像我一样，这会给您的Web服务器带来巨大的服务负担。为了解决这个问题，为什么我们不能用CSS映射来将多个图像合并为一个图像呢？通过这样做，您的服务器只需要处理一个请求即可获得所有图像，这可以非常高效地完成。oneimage的其他好处列在下面

减少文件传输损坏的可能性
更快的图像下载速度，因为所有图像都在一个文件中
启用单个图像的缓存以将其保留在内存中
更少的HTTP请求和响应
阻止他人直接在其网站上使用您的图像
使图像的悬停效果变得简单
将GIF格式转换为PNG，以不受GIF版权的限制

处理的图像格式

oneimage模块处理以下图像格式。

JPEG
JPG
GIF
BMP
PNG
ICO
TIF

Using the Code

要使用此代码，您必须将WebsiteHandler.dll复制到ASP.NET网站的bin文件夹中。您还必须在web.config文件中添加以下行。

<configSections>
  <section name="oneimage" type="WebsiteHandler.OneImageConfigHandler, WebsiteHandler"/>
</configSections>
<oneimage>
  <image imagedirectory="C:\Users\Admin\Documents\shoppingbagger\shoppingbagger\images" 
   outputimagepath=
	"C:\Users\Admin\Documents\shoppingbagger\shoppingbagger\images\oneimage.png" 
   outputcsspath=
	"C:\Users\Admin\Documents\shoppingbagger\shoppingbagger\css\oneimage.css" 
   outputimagewebpath="../images/oneimage.png" />
</oneimage>
<httpModules>
  <add type="WebsiteHandler.OneImageHandler,WebsiteHandler" name="OneImageHandler" />
</httpModules>

web.config设置说明

上面的configsection允许您通过使用oneimage节点来指定多个oneimage。我实现此功能的原因是，如果您有仅属于您网站特定部分的图像组，那么就不需要将它们全部加载到一个大文件中，您可以将其分成几个较小的集合文件。oneimage xmlnode包含xmlnodelist中的图像设置。要创建一个oneimage，您需要指定以下属性

属性名称	类型	描述
image目录	`字符串`	这是包含所有需要编译到oneimage中的图像的目录。
outputimagepath	`字符串`	这是创建oneimage的文件路径。
outputcsspath	`字符串`	这是创建CSS图像映射的文件路径，如果存在，则将其附加到oneimage注释中。
outputimagewebpath	`字符串`	这是oneimage的网络地址路径。

OneImage源代码解释

OneImage.cs包含创建oneimage的所有源代码。在此文件中，有5个类

OneImage - 用于创建实际oneimage的主类。它具有用于将图像合并到单个文件中的GDI+图形方法。还具有用于创建位置映射的CSS方法。
CombineImage - 此类保存有关要合并到oneimage中的单个图像的信息。它包含文件名、路径、实际图像和定位信息。
OneImageHandler - 此类负责在服务器启动时创建oneimage和CSS，而不是每个请求一次。
OneImageConfigHandler - 此类负责解析web.config中的oneimage xmlnode。
OneImageConfigItem - 此类旨在保存oneimage xmlnode中的xmlnodelist中的一个XML节点图像。

OneImage公共方法

Combine() - 将目录中的图像合并为一个图像，并创建CSS映射文件。所有工作都从此方法完成。

HTML源代码示例

在网页上创建图像非常简单。有很多种方法可以做到。我将列出使用dom id属性的最常见方法。由于oneimage是通过编译指定图像目录中的所有图像来构建的，因此它使用原始图像文件名作为其唯一id。例如，如果您的文件名是"logo.gif"，那么您的dom id就是"logogif"。请注意，已删除了"."。原因在于CSS不允许在CSS定义中使用"."。以下代码将显示一个图像，因为它在CSS映射文件中使用了background-image和background-position。

<img id="logogif" />

或

<div id="logogif"></div>

或

<span id="logogif"></div>

现在，由于oneimage直接使用id标签进行CSS，您可能会问如何为我的图像指定其他CSS样式。嗯，也有几种方法可以做到，通过class=""、添加同名#logogif{more styles}，或者直接添加到HTML标签中使用style=""。

如何创建鼠标悬停效果

OneImage有一个我专门创建的特殊功能，可以轻松创建图像鼠标悬停效果。要实现以下功能，您只需要创建两个图像文件，一个用于按下状态，一个用于悬停状态。为了让oneimage自动生成悬停和聚焦的CSS，您需要按如下方式命名文件

鼠标悬停 - "filename_over.ext"
正常 - "filename.ext"

然后它会自动生成如下CSS

#filename{ height: 10px; width: 10px; 
    background-image: url(../images/oneimage.png); background-position: 0px 0px; }
#filename:hover{ height: 10px; width: 10px; 
    background-image: url(../images/oneimage.png); background-position: 0px -10px; }
#filename:focus{ height: 10px; width: 10px; 
    background-image: url(../images/oneimage.png); background-position: 0px -10px; }

这就是神奇之处……您通过CSS样式轻松获得鼠标悬停和按下效果，这应该可以在所有符合CSS标准的浏览器中正常工作。

需要改进的地方

oneimage输出PNG的压缩
更多CSS选项，用于在自动生成的CSS中创建样式
oneimage使用更整洁的空白符
~~添加FileSystemWatcher来跟踪目录图像的变化，然后重新创建oneimage。~~
添加"_parsing"以允许在多个dom标签中使用相同的图像。
允许使用web.config设置输出不同文件类型，而非仅限于png。
添加缓存支持。

历史

版本1.1 - 2009年3月8日 - OneImage改版，包括FileSystemWatchers以检测图像目录的变化。添加了Web.config设置以启用自动刷新。修复了图像和CSS读写的文件锁定问题。
版本1.0 - 2009年2月28日 - OneImage创建