在网站的所有实例上更新图像

Question

所以我有一个 Raspberry Pi 控制我的车库门。 Pi 是运行一个 apache 网络服务器。我还有一个连接到 raspberry pi 的摄像头，我希望能够更新来自摄像头的图像。目前我有以下代码：

garage.html:

<html>
<head>
    <meta charset="utf-8">
    <title>The House Garage Controls</title>
</head>
<body>
<form action="Garage.php" method="get">
  <input type="submit" value="Open/Close Garage" style="width:1000px; height:150px;font-size:80px;border-radius: 25px;
background-color: 2DA3A7;" >
</form>
 <div id="doorImage">
    <img src="doorStatus.jpg" alt="Garage Door Picture From Camera" height="1000" width="1000">
 </div>
 <script src="jquery-1.10.2.js"></script>
    <script>
      $(document).ready(function(){
        var $container = $("doorImage");
        $container.imagefill('doorStatus.jpg')
        var refreshId = setInterval(function()
        {
            $container.load('doorStatus.jpg');
         }, 5000);

    }); 
        </script>
<form action="takeImage.php" method="get">
  <input type="submit" value="Update Picture" style="width:1000px; height:150px;font-size:80px;border-radius: 25px;
background-color: 2DA3A7;" >
</form>
</body></html>

并且takeImage.php拍照：

<?php
$output = shell_exec('raspistill -n -o /var/www/doorStatus.jpg');
echo "Output = ".$output;
header("Location: garage.html");
?>

当我在我的计算机上查看 garage.html 运行 chrome 它会在我单击更新图片按钮时更新图像。但是在我的 android phone 上，当我在 garage.html 上时，它不会更新图片，除非我重新打开页面。我想知道如何才能让所有查看 garage.html 的设备看到相同的最新图像。有人告诉我 AJAX 是执行此操作的方法，但我还没有找到任何执行类似操作的代码片段。

Answer 1

听起来您的 Android 浏览器正在缓存图像（这是标准行为）。我建议每次更改图像的名称（例如使用时间戳），然后让页面找到最新的图像。这将防止缓存问题（因为它不是同一文件的新版本）。

Answer 2

这可能是缓存问题。

您可以通过向 url.

添加唯一的查询字符串来解决这个问题（防止缓存）

类似于：

var curDate = new Date();
$container.load('doorStatus.jpg?time=' + curDate.getTime());

您还可以将服务器配置为不缓存这些图像。

在网站的所有实例上更新图像

Updating An Image on All instances of a website

html

php

ajax

jquery

raspberry-pi