http - 将所有图片打包到服务器上的单个存档中，并在客户端解压缩

Question

那么，是否可以在服务器端创建存档(/二进制数组？)，然后发送它 + 运行时生成的 HTML 页面。我觉得是这样的。想知道是否有任何图书馆。特别是客户端。

现在的核心问题是:1. 如何将image: 作为js 变量传递？比如 var imagebinary = "3nmrnmfu5...."2. 如何将图像从二进制格式转回并粘贴到需要的地方。

现在我正在考虑使用 data: URL。

tomfumb 提出了 google 使用的一个绝妙的解决方案:一个“大”图像在客户端被分成较小的部分。

Answer 1

我认为您正在寻找的技术通常被称为“CSS Sprites”，并且周围有很多关于它们的好文章(只需询问您最喜欢的搜索引擎)。还有其他使用 Javascript 的方法，但我自己非常喜欢 CSS 方法。

有相当不错的文章在:

http://www.alistapart.com/articles/sprites

http://www.w3schools.com/css/css_image_sprites.asp

和许多其他人。

想法是将所有图像组合成一个更大的图像，然后使用 CSS 来控制在任何特定情况下显示更大图像的哪些部分。

假设您有四张相同大小的图片，1、2、3、4(它们不必相同大小，但它使解释更容易

使用您最喜欢的服务器端图像工具包将它们组合成一个更大的图像。如果您使用的是 Python，则可以使用 PHP 中的 GD、ImageMagick 或 PIL。大多数服务器端工具包都有一个可以组合图像的库。

1234

然后创建将在客户端显示更大图像的相关部分的 CSS 规则:

例如:

div.sprite {  height:100px; width:100px;  }
#image1 {  background: url(bigimg.png) 0 0; }
#image2 {  background: url(bigimg.png) -100px 0; width: 100px;}
#image3 {  background: url(bigimg.png) -200px 0; width: 100px;}
#image4 {  background: url(bigimg.png) -300px 0; width: 100px;}

以及显示它们的 HTML:

<div id='image1' class='sprite'></div> 
<div id='image2' class='sprite'></div> 
<div id='image3' class='sprite'></div> 
<div id='image4' class='sprite'></div>

这是一种可能不太难实现自动化的事情。