3

我有一个包含大约 70 张图片的网页。我正在寻找一种将这些图像捆绑到资源文件中的方法。这并不是为了提高客户端性能，因为缓存等会解决这个问题。通过我们的 cms 更多地用于服务器端的资产管理 - 我希望能够将单个资源部署到 cms 中，而不必创建 70 个单独的资源。

是否有 JavaScript 库可以让我捆绑图像？

4

2 回答 2

4

使用Image Sprites很容易做到这一点，您无需使用 JavaScript。Sprite 是单个图像文件，其中包含位于特定位置的图像集合。我建议使用带有图像的透明PNG图像。

下面你可以看到谷歌、Windows Live 和 Facebook 使用的透明 PNG 精灵。

新的 Google 图片精灵Windows Live 精灵在此处输入图像描述

一旦精灵加载到网页中，很容易在另一个页面中显示图像，因为浏览器通常会缓存图像以提高页面加载速度。您可以通过使用 CSS 定义其在 sprite 中的特定位置来在 sprite 中显示特定图像，例如；

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

最后，Spritebox是一个方便的工具，可以创建您自己的自定义图像精灵。

于 2012-08-09T05:34:55.873 回答
3

我认为你需要的是 CSS sprite。使用 CSS sprite，您可以在单个图像中包含多个图像，并使用该图像根据您的要求显示单个图像。

这样做的主要优点是您需要对该图像的单个请求，而不是对每个图像的请求。

要了解更多关于 CSS Sprite 的信息，请查看以下链接 http://www.w3schools.com/css/css_image_sprites.asp

于 2012-08-09T05:12:11.100 回答