我有一个包含大约 70 张图片的网页。我正在寻找一种将这些图像捆绑到资源文件中的方法。这不是为了提高客户端性能,因为缓存等会解决这个问题。它更适合通过我们的 cms 在服务器端进行 Assets 管理 - 我希望能够将单个资源部署到 cms 而不必创建 70 个单独的资源。
是否有可以让我捆绑图像的 JavaScript 库?
最佳答案
使用 Image Sprites 很容易做到这一点,您不需要使用 JavaScript。 Sprite 是单个图像文件,其中包含位于特定位置的图像集合。我建议使用包含您的图片的透明 PNG 图片。
下面您可以看到 Google、Windows Live 和 Facebook 使用的透明 PNG Sprite 。
一旦在网页中加载 Sprite ,就很容易在另一个页面中显示图像,因为浏览器通常会缓存图像以提高页面加载速度。您可以通过使用 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 是一个方便的工具,可以创建您自己的自定义图像 Sprite 。
关于javascript - 我可以将图像捆绑到一个网页文件中吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11876985/