0

我正在编写一个在您的网络浏览器中显示和播放 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');
4

2 回答 2

4

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

于 2013-01-26T22:20:51.970 回答
0

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

于 2013-01-26T22:28:05.207 回答