javascript - 在随机生成图像的 PHP 脚本中，为什么在页面上多次调用它总是生成相同的图像？

Question

我正在制作一个愚人节恶作剧网页，其中页面上的所有图像都被替换为从一组图像中随机挑选的图像。我有一个随机选择图像并发送图像的 php 脚本:

<?
$files = array('pacman', 'blinky', 'cherry', 'clyde', 'inky', 'pinky'); 

$name = $files[array_rand($files)] . '.png';

header("Content-Type: image/png");
header("Content-Length: ".filesize($name));

readfile($name);
?>

这很好用，每次访问时都会返回一张随机图像。

第 2 步是用脚本替换所有图像源属性，我通过包含一个包含如下内容的 javascript 文件来实现:

$(document).ready(function(){
    $('img').attr('src', 'april.php')
});

这也有效，除了一个问题:它似乎只选择一次随机图像。也就是说，页面上的所有图片都将是同一张图片。如果我刷新，它将是随机选择的图像，但在下次刷新之前，页面上的所有内容都是相同的图像。

我猜浏览器是第一次缓存它，实际上并没有调用 php 脚本，但我不确定如何去禁用它，或者在它周围工作。

那么，为什么会发生这种情况，我该如何解决？

Answer 1

PHP 每次都会生成一个随机图像，但是您的浏览器会将该图像保存在缓存中并加载它。

将此添加到您的 PHP 代码中:

  header("Cache-Control: no-cache, must-revalidate");

但是，在您的情况下，由于图像已经加载，您必须首先硬刷新页面 CTRL+F5。

另一种方法是向 URL 添加获取请求。

  $('img').attr('src', 'april.php?t=' + Math.floor(Math.random() * 60000) + 1);

对于多张图片:(感谢@Francesco de Guytenaere 发现它)

  $('img').each(function(){ $(this).attr('src', 'april.php?t=' + Math.floor(Math.random() * 60000) + 1); });

然而，这会改变整个页面上的每张图片，也许您想使用一个选择器，只选择具有特定 data-tag 的图片，就像这样。

  <img src="image/to/background" />
  <img src="" data-cache="no" />
  <img src="" data-cache="no" />

  $(document).ready(function(){
    $("img[data-cache='no']").each(f.....
  });