javascript - 如何将 <img> 标签 SRC 加载到 JavaScript 变量中以便在多个图像中重复使用？

Question

这是我的快速网页下载计划...

1. 将所有图像放入单个 png-24 图像 Sprite 中。
2. 将该图像编码为 base64 并将其包含在网页 HTML 代码中。
3. 复制原始图像 Sprite 的 SRC，并将其重新用于 Logo 、共享按钮、其他图像等。

我可以预见的唯一问题是 Base64 编码图像源的重复。

我可以使用 jQuery 轻松提取图像源并将其重新插入到我的所有空白图像(需要创建 Sprite 的图像)中吗？

编辑:有些人提到 Base64 图像不会被缓存，但是如果我告诉它，我的整个网页(包含 Base64 图像)不会被缓存吗？

Answer 1

这是 CSS 图标/可重用图像的常见技术。

您可以获得图片src使用$(element).attr('src'); .

但是，我没有看到将图像二进制文件(我假设您指的是图像文件本身)编码为 base64 以包含在 HTML 标记中的优势。您可能想得太多了。

我认为您不能通过将图像数据重新编码为 Base 64 来“节省”字节，主要是因为 Base 64 是比原始数据中使用的编码更窄的字符集(认为二进制 111 = 十进制) 7 )，所以我实际上期望更大的输出。 (但这只是我的理论，所以如果我错了，请纠正我。)

但是，例如，如果您确实设法重新编码至最多相同大小的标记，那么您就不会在“更快的下载”方面取得任何进展。您仍在下载相同数量的数据。很可能更多。

如果您确实管理较小的有效负载，编码/重新编码的性能损失是否值得？更不用说跨浏览器兼容性了。

更好的技术是将图像打包成单个图像文件(这是练习的精神)，然后让浏览器正常下载它。一旦下载了一份图片，只要浏览器缓存了该图片，就不会再下载。

编辑

回答您有关网页缓存的编辑，是的，您的网页将被缓存。您的 Base-64 编码图像也是如此。但由于您的图像实际上是 HTML 标记的一部分，因此它们将与 HTML 页面一起缓存。

例如如果我下载foo.html (其中包括我的编码 Sprite 文件)，我肯定会像平常一样获得我的标记。该页面已被缓存。

现在，我下载bar.html (它也使用我的 Sprite 文件)。我预计您的图像将无法从 bar.html 进行缓存访问，因为就浏览器而言，该图像是 foo.html HTML 标记的一部分。它甚至可能不会意识到那里有一个图像。

缓存的工作方式(据我所知)是URL匹配。这就是为什么我下载 facepalm.jpg在一页中，并请求 facepalm.jpg在另一个中，浏览器识别出我已经下载了它，所以它没有。

根据您的编码计划，我不会请求 foo.html (或其一部分)来自bar.html ，所以我预计您的图像缓存不会像您在问题中所期望的那样工作。

如果我访问foo.html 再次不过，我会获得该页面缓存的所有好处，因为我“之前下载过该页面”。