我可以将图像捆绑到一个网页文件中吗？

Question

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

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

Answer 1

使用 Image Sprites 很容易做到这一点，您无需使用JavaScript。 Sprite是一个单个图像文件，在特定位置放置了一组图像。我建议在图片中使用透明的 PNG 图片。

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

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

#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 是一个方便的工具，可以创建自己的自定义图像精灵。

Answer 2

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

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

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