Question

我正在使用javascript根据用户互动动态地将任意一系列图片加载到单个img标记中：

function reassignImage(newSource)
{
   img.src = newSource;
}

这很好用，除了我用Chrome开发者工具检查它时，我看到即使我重新加载我已经加载的图像，它也会进行另一次http调用并增加整个图像大小图。

这似乎是两个世界中最糟糕的。我想要：

如果图像是从缓存加载相同。
重新加载每张图片每一次，但随后都没有成长高速缓存中。

我将如何实现这两种情况？

谢谢！ Yarin

Answer 1

图像的http响应中设置的缓存控制标头是什么？（Chrome开发人员工具会告诉您）。如果它没有设置为可缓存，则会被重新获取。

Answer 2

这将预加载图片，以便在您实际设置src标记的img时，浏览器可以立即显示该图像。我推测，预加载这样的图像将确保它在缓存中，因此它不会重新加载，但我还没有测试过。

var myImg = new Image(25, 25);
myImg.src = "/foobar.png";

换句话说，现在应该只下载两张图片

function reassignImage(newSource) {
    var myImg = new Image(25, 25);
    myImg.src = newSource;
    img.src = newSource;
}

reassignImage("first.png");
reassignImage("second.png");
reassignImage("first.png");

修改

我做错了。尝试为用户加载的每个新文件创建new Image()。将这些图像元素交换进出dom。

<html> <head> <script> var imageElements = {}; function reassignImage(newSource) { if (typeof imageElements[newSource] == "undefined") { imageElements[newSource] = new Image(); imageElements[newSource].src = newSource; } var container = document.getElementById("imageContainer"); container.innerHTML = ''; container.appendChild(imageElements[newSource]); } </script> </head> <body> <div id="imageContainer"></div> </body> </html>

Answer 3

从技术上讲，您可以在.htaccess文件中以这种方式设置：

# Set up caching on images for 1 month
<FilesMatch "\.(jpg|jpeg|png|ico|gif)$">
ExpiresDefault A2419200
</FilesMatch>

如果您希望使用此设置强制刷新图像，请将其附加到其URL：

'?'+ new Date().getTime()

缓存动态加载的图像

3 个答案: