这是 CSS 图标/可重用图像的常用技术。
您可以src
使用$(element).attr('src');
.
但是,我看不到将图像二进制文件(我假设您的意思是图像文件本身)编码为 base64 以包含在 HTML 标记中的优势。你可能有点想多了。
我不认为你可以通过将图像数据重新编码为 base 64 来“保存”字节,主要是因为 base 64 是一个比原始数据中使用的编码更窄的字符集(想想 binary 111
= decimal 7
),所以我期望一个实际上更大的输出。(但这只是我的理论,如果我错了,请纠正我。)
但是,例如,如果您确实设法重新编码为最多相同大小的标记,那么您就不会在“更快的下载”方面取得任何进展。您仍在下载相同数量的数据。很可能更多。
如果您确实管理较小的有效负载,那么编码/重新编码的性能损失是否值得?更不用说跨浏览器的兼容性了。
更好的技术是将图像打包成单个图像文件(这是您练习的精神),然后让浏览器正常下载。一旦图像的一个副本被下载,只要它被浏览器缓存,它就不会再下载它了。
编辑
要回答您对网页缓存的编辑,是的,您的网页将被缓存。您的 base-64 编码图像也是如此。但是由于您的图像实际上是 HTML 标记的一部分,它们将与HTML 页面一起缓存。
例如,如果我下载foo.html
(其中包括我的编码精灵文件),我肯定会像往常一样获得我的标记。该页面被缓存。
现在,我下载bar.html
(它也使用我的精灵文件)。我希望您的图像不能从 缓存访问bar.html
,因为就浏览器而言,该图像是 .html 标记的一部分foo.html
。它可能甚至不会意识到那里有一个图像。
缓存的工作方式(据我所知)是URL 匹配。这就是为什么如果我在一个页面中下载facepalm.jpg
,然后在另一个页面中再次请求facepalm.jpg
,浏览器会识别出我已经下载了它,所以它不会。
根据您的编码计划,我不会向 请求foo.html
(或其中的一部分)bar.html
,因此我希望您的图像缓存不会像您在问题中所期望的那样工作。
但是,如果我foo.html
再次访问,我将获得缓存该页面的所有好处,因为我已经“之前下载过”。