使用 PHP 和 JavaScript 每秒更改图像答案

【问题标题】：Change image every second using PHP and JavaScript使用 PHP 和 JavaScript 每秒更改图像
【发布时间】：2016-04-18 14:18:33
【问题描述】：

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

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

在网页上显示第一张图片可以正常工作，但获取所有后续图片不起作用，始终显示相同的图片。

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

你可以看到图片加载的JQuery代码。

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

这是worker文件的返回：

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

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

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

谢谢

【问题讨论】：

不要忘记癫痫警告。
可能是缓存问题？您是否尝试删除图像并使用新 URL 在同一位置添加新图像？
那么你是返回图片还是html？
@Glufu 删除是什么意思？
load() 将设置对象的 innerHTML。如果您在加载新图像之外中断 AJAX 请求，这应该可以工作。但我猜你设置了 PHP 文件以在每个请求上返回一个图像，这意味着你不必执行 AJAX 请求，只需更改元素的 src 属性。

标签： javascript php jquery html image

【解决方案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>" />';
?>

这个答案假设结果是图片来源。

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

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

【讨论】：

（如果 php 页面没有返回整个 html 文档而只返回图像，这将起作用。）
@Henry Zou 我已经尝试过你的灵魂，但它在我的情况下不起作用，'。现在什么都没有显示
然后尝试使用ajax来检索“图像”html然后手动做一个$('image).html(ajaxResponse);
对不起，我不擅长 Ajax。你能给我一些关于如何做的指示吗？谢谢
添加了 ajax 示例。此代码未经测试。有关更多示例和文档，请参阅 jquery ajax

【解决方案2】：

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

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

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

【讨论】：