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

我正在做一个网页愚人节恶作剧，网页上的所有图片都被从一系列图片中随机选取的图片替换。我有一个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);
?>

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

我猜浏览器是第一次缓存它，实际上并没有调用php脚本，但我不知道如何禁用或运行它

---

那么，为什么会发生这种情况，我该如何着手修复它呢？

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

将此添加到PHP代码中：

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

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

另一种方法是向URL添加get请求

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

对于多张图片：（归功于@Francesco de Guytenaere发现了它）

但是，这将更改整个页面上的每个图像，可能您希望使用选择器，只拾取具有特定

数据标记的图像，就像这样

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

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


$（文档）.ready（函数（）{
$（“img[data cache='no']）。每个（f。。。。。
});
PHP每次都会生成一个随机图像，但是浏览器会将该图像保存在缓存中并加载该图像

将此添加到PHP代码中：

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

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

另一种方法是向URL添加get请求

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

对于多张图片：（归功于@Francesco de Guytenaere发现了它）

但是，这将更改整个页面上的每个图像，可能您希望使用选择器，只拾取具有特定
数据标记的图像，就像这样

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

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


$（文档）.ready（函数（）{
$（“img[data cache='no']）。每个（f。。。。。
});
您是否尝试在JS中实现随机化功能？这不是一个答案，而是一个解决方法。尝试向img SRC属性添加一个cache-buster随机数，例如$（'img'）.attr（'SRC'，'april.php？'+Math.floor（（Math.random（）*100）+1））；这会告诉你这是否是缓存问题。你必须在第一次调用
rand
之前使用随机数生成器。否则它将生成相同的数字序列（就像你现在得到的一样）。数组是你的朋友。放弃开关。
$files=['pacman'，'blinky'，'cherry'，'clyde'，'inky'，'pinky]；$name=$files[array\u rand（$files）]“.png”；
您是否尝试在JS中实现随机化功能？这不是一个答案，而是一个解决方法。尝试向img SRC属性添加一个cache-buster随机数，例如$（'img'）.attr（'SRC'，'april.php？'+Math.floor（（Math.random（）*100）+1））；这会告诉你这是否是缓存问题。你必须在第一次调用
rand
之前使用随机数生成器。否则它将生成相同的数字序列（就像你现在得到的一样）。数组是你的朋友。放弃开关。
$files=['pacman'，'blinky'，'cherry'，'clyde'，'inky'，'pinky]；$name=$files[array\u rand（$files）].png'；
这行不通；你应该用
每一个
；
$（'img'）.each（function（）{$（This.attr（'src'，'april.php？t='+Math.floor（Math.random（）*60000）+1）；
来包装它。否则答案很好。这段代码会不会将页面上每个图像的URL替换为一个随机图像？可能需要在该
上使用选择器[数据缓存='no']
->
是的，如果你阅读了问题
这同样有效，除了一个问题：它似乎只选取一个随机图像一次。也就是说，页面上的所有图像都将是相同的图像。如果我刷新，它将是随机选择的图像，但在下次刷新之前，页面上的所有图像都将是相同的图像。
这意味着这不仅是一个缓存问题，而且是将al img src属性设置到同一个源的问题；因此存在循环。当然，您仍然应该添加cachebuster，这就是为什么答案基本上是确定的。（编辑：）很好的捕获，没有期望有多个图像标记。@Francescodeguentenaere在答案中更新了您的名字。这不起作用；您应该将其包装在
each
；
$（'img'）。each（function（）{$（This.attr（'src'，'april.php？t='+Math.floor（Math.random（）*60000）+1）；）
。否则答案很好。此代码是否会将页面上每个图像的URL替换为随机的URL？可能需要在该
[data cache='no']上使用选择器
->
是的，如果你阅读了问题
这同样有效，除了一个问题：它似乎只选取一个随机图像一次。也就是说，页面上的所有图像都将是相同的图像。如果我刷新，它将是随机选择的图像，但在下次刷新之前，页面上的所有图像都将是相同的图像。
这意味着这不仅是一个缓存问题，而且是一个将所有img src属性设置到同一源的问题；因此存在循环。当然，您仍然应该添加cachebuster，这就是为什么答案基本上是可以的。（编辑：）很好，不希望有多个图像标记。@Francescodeguentenaere在答案中更新了您的姓名。