Question

我有一个摄像系统，每隔几秒就会将图像文件写入网络服务器。我有一个网页，使用javascript重新加载源图像标记。

网页会定期仅显示图像的一部分。我相信这是因为当网页请求重新加载时传输尚未完成。

这是我的代码：

<html>
    <head>
        <script language="javascript" type="text/javascript">
            var t = setTimeout("reloadImgs()", 10);

            function reloadImgs() {
                reloadImg("kobmimg");
                reloadImg("eafimg");
                t = setTimeout("reloadImgs()", 5000);               
            }

            function reloadImg(id) {

                var obj = document.getElementById(id);
                var src = obj.src;
                var pos = src.indexOf('?');
                if (pos >= 0) {
                    src = src.substr(0, pos);
                }
                var date = new Date();
                obj.src = src + '?v=' + date.getTime();

                return false;
            }       
        </script>
    </head>
    <body>
        <img src="eaf_camera_image.jpg" id="eafimg" width="350px" />
        <img src="kobm_camera_image.jpg" id="kobmimg" width="350px" />
    </body>
</html>

任何解决方案都将受到赞赏。

Answer 1

我认为当您更改源并且浏览器需要新图像时，图像尚未完全加载到服务器。

只有在完全加载后，才能使图像可供浏览器使用。

这意味着服务器上的脚本应该将图像上传到单独的文件夹上，或者可能使用不同的名称，然后在完全加载时（例如，通过更新数据库字段可以知道这一点），复制图像到脚本可以下载它的文件夹。

您还应首先通过发送请求并检查响应是什么来通知您的脚本图像是否可用。否则，由于您的脚本每次都会添加一个不同的变量以避免缓存，因此即使它与您现在拥有的图像相同，也会最终下载该图像。

Camera -> Upload image -> Image fully uploaded? -> Update database entry

Browser request image -> Server check -> Available? -> Download image

Answer 2

您的评估对我来说很可能：网页正在加载仅部分上传的图片。您有多种选择：

配置您的FTP服务器以将文件保存在临时位置，直到上传完成（不确定所有FTP服务器是否支持此功能）
如果相机在上传完成时支持某种回调（很少），请使用来触发副本，在此之前显示较旧的图像
如果这些都不是一个选项，请将摄像机配置为将文件上传到与Web服务器的文档根不同的位置，并运行一个脚本，定期将文件复制到最终位置（例如，从Web服务器上的一个目录到另一个）

Answer 3

您可以将图像ftp到不是您的实时文件夹的文件夹，然后使用cron作业将图像移动到服务文件夹中。您的reloadImgs方法可以进行时间检查以确保您不在cron窗口中，如果它可以跳过该重新加载周期并再次等待。

Answer 4

也许您的相机系统正在错误地拍摄图像，否则图像有多大以及您有这个问题的连接速度有多慢......无论如何，我可以建议一个解决方案，这在我看来会有所帮助。

try using jQuery to do this:
$('#eafimg').load(function(){
    setTimeout('reloadImg ("eafimg")', 5000) ;
}
$('#kobmimg').load(function(){
    setTimeout('reloadImg ("kobmimg")', 5000) ;
}

在Javascript中重新加载图像源的问题

4 个答案: