使用PHP和JavaScript每秒更改图像

Question

我有一个用JavaScript编写的小脚本，用于每秒更换图片。问题是图像没有改变。

显示的图像文件每秒都会被新数据覆盖。

在网页上显示第一张图片可以正常工作，但是所有后续图片都不起作用，总会显示相同的图片。

JQuery代码包含时间扩展，以强制浏览器每次重新加载新图像，而不是从缓存中取出它。

您可以看到用于图像加载的JQuery代码。

<script type="text/javascript">
    var auto_refresh = setInterval(function (){
            $('#image').load('camera_stream_worker.php?time=' + Date.now());}
    , 1000);
</script>

这是工人文件的返回：

<?php
  echo '<img src="/RAMdisk/image.jpg" />';
?>

在图片上，您可以看到网络流量。

所以我的问题是：如何每秒显示不同的图片？

感谢

Answer 1

ajax方法：

可能需要在标头中指定不同的内容类型。

$.ajax({
  method: 'get',
  url: 'camera_stream_worker.php?time=' + Date.now()) 
}).success(function(data) {
  $('#image').html(data);
})

可能是图像名称都相同，因此它不会获得新的图像名称。尝试为图片添加时间戳：

<?php
  echo '<img src="/RAMdisk/image.jpg?<TIMESTAMPHERE>" />';
?>

这个答案假定结果是图像srcs。

您是否尝试过更改src而不是加载？

<script type="text/javascript">
    var auto_refresh = setInterval(function (){
            $('#image').attr('src', 'camera_stream_worker.php?time=' + Date.now());}
    , 1000);
</script>

Answer 2

这里的问题似乎是你正在返回一个html文档，而不仅仅是正在改变的图像。 HTML在源代码中有一个硬编码的image.jpg，因为它没有改变，所以它是从缓存中提取的。

您需要做的是更改该图像源以获取最新图像，而不是更新它周围的整个html snipplet。

其他选项是让php将时间戳附加到html。