Question

所以我有一个Raspberry Pi控制我的车库门。 Pi正在运行一个apache webserver。我还有一个相机连接到树莓派，我希望能够更新相机的图像。目前我有以下代码：

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");
?>

当我在运行chrome的计算机上查看garage.html时，单击更新图片按钮时会更新图像。但是在我的android手机上，当我在garage.html时它不会更新图片，除非我重新打开页面。我想知道如何制作它以便查看garage.html的所有设备都会看到相同的最新图像。我被告知AJAX是这样做的方法，但我没有找到任何类似的代码片段。

Answer 1

这可能是缓存问题。

您可以修复此问题（防止缓存），例如向网址添加唯一的查询字符串。

类似的东西：

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

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

Answer 2

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

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

2 个答案: