Question

var image1 = new Image();
image1.src = someUrl;

// someUrl is a valid URL to a PHP file which outputs a PNG file using the imagepng function. This action caches image1 to someUrl.

image1.onload = function() {

    // Some things have changed and a new image is created, which I would like to cache to someUrl.
    // This is currently done by sending a session (temporary) cookie, which is recognised by the PHP file, so that it knows to take different action than the first time.
    // Again, the imagepng function is used to output the image.

    var image2 = new Image();
    image2.src = someUrl; // this is the exact same URL
};

期望的结果是让浏览器将image2缓存为缓存的image1的替代。不幸的是，即使在image2.src = someUrl;语句之后，image1也是缓存的。

然而，有效的是缓存image1，然后创建会话cookie并手动转到someUrl页面。然后它会缓存image2。

是否无法在不刷新页面的情况下使浏览器缓存图像两次？

Answer 1

您可以尝试在网址中添加仲裁参数。例如：

var image1 = new Image();
image1.src = someUrl;

var image2 = new Image();
image2.src = someUrl + '?action=cache'; // or timestamp

这会欺骗浏览器将image2视为新图像，同时仍然加载图像从正确的网址（假设您没有在GET中发送任何其他参数，在这种情况下使用'＆amp;'而不是'？'）

Answer 2

尝试在php文件中使用缓存控件头输出png。 E.g。

header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past

来源：http://php.net/manual/en/function.header.php

使用javascript创建两次缓存图像

2 个答案: