只加载一次图像，然后复制到多个位置？答案

【问题标题】：Only load an image once, then copy to multiple locations?只加载一次图像，然后复制到多个位置？
【发布时间】：2013-01-26 22:16:02
【问题描述】：

我正在编写一个在您的网络浏览器中显示和播放 mp3 的小应用程序。在顶部，我加载了播放列表中所有歌曲的专辑封面。在页面底部，我更改了一张图片以匹配当前正在播放的歌曲的专辑封面。

问题是专辑封面图片像1200X1200 一样巨大，每次歌曲更改时都需要很长时间才能加载。

我想知道是否有一种方法可以复制图像数据并显示在下面，而不仅仅是动态创建每次都必须下载的img 标签。

这是我用来获取和显示底部img的代码：

function currentSongInfo() {
    var currentItem = '.jplayer_playlist_current';
    var currentArtist = $(currentItem+' .artist').html();
    var currentSong = $(currentItem+' .thumb-title strong').html();
    var currentAlbumArt = $(currentItem+' img.thumb-image').attr('src');
    //below image is reloaded each time I change it
    currentAlbumArt = '<img src="'+currentAlbumArt+'" />';
    $('#current-song-info-bar').html(currentAlbumArt+'<div><span>'+currentSong+'</span><br>'+currentArtist+'</div>');
}

@ali 提供以下解决方案

将此添加到从 MP3 获取图像的 PHP 文件中：

header('Cache-Control: max-age=28800');

【问题讨论】：

标签： php javascript jquery image

【解决方案1】：

除非我在您的设置中遗漏了某些内容，否则如果为图像指定了缓存控制标头（用于遥远的将来），并且图像已下载到客户端的浏览器上，则对同一图像的下一个请求将不会导致新的下载，但只会从浏览器的缓存中获取项目（假设用户由于某种原因没有清除缓存）。您还可以查看电子标签 - 但是，在这种情况下，浏览器将向服务器发送请求以检查项目是否已更改 - 如果已更改，则会进行下载；如果没有，则不会下载（但至少会发出 http 请求以检查项目是否过时）。希望对您有所帮助。

【讨论】：

我认为加载它并且缓存版本不只是显示的原因可能是我不只是使用指向目录中图像的img标签在我的服务器上，但我的图像设置如下：<img src="cover.php?file=blah.mp3" />。我不完全确定，但也许因为我使用 PHP 来获取专辑封面并返回它，它会强制重新加载而不是缓存？
您能否检查您的浏览器工具（例如在 chrome 或 firefox 中），如何为图像资源设置缓存控制标头或电子标签？
如何找到缓存控制标头在工具中的位置？
如果使用谷歌浏览器 - 转到工具 -> 开发者工具 (ctrl+shift+i), 转到网络选项卡, 重新加载页面, 点击图片, 检查标题 (cache-control/电子标签等应该在那里）。您还可以使用诸如 firefox (firebug) 之类的东西
我得到这个缓存控制：Cache-Control:max-age=0这是否意味着它永远不会被缓存？

【解决方案2】：

Ali 对缓存的看法是正确的。除非使用响应标头或客户端设置了一些有趣的东西，否则图像将从缓存中加载。重用图像的另一种方法是创建一个 Javascript 图像对象，就像在这篇文章中一样： Assign Javascript image object directly to page

【讨论】：