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

标签 javascript html

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

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

最佳答案

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

下面您可以看到 Google、Windows Live 和 Facebook 使用的透明 PNG Sprite 。

New Google image sprite Windows Live Sprite enter image description here

一旦在网页中加载 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/

相关文章:

html - 在 Rails 3 中动态标记 div ids

javascript - 创建一个 div 表格

javascript - 在警报框中打印函数的结果

javascript - 如何使用 Jquery JSP 从 html 选择选项中选择一个字符串值

html - IE8 中没有边框半径,css3PIE 不工作?

javascript - Next.JS 静态站点生成和客户端 Apollo 获取

javascript - 如何使用 place_id 获取地点详细信息?

jquery - turnjs插件翻书中间需要渐变

javascript - 如何使用javascript将运算符存储在变量中

javascript - IPython 笔记本到幻灯片 : Reveal is not defined