Question

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

提供

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

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

Answer 1

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

Answer 2

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

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

2 个答案: