使用Javascript重新加载图像源的问题

我有一个相机系统，每隔几秒将图像文件转移到网络服务器。我有一个使用JavaScript重新加载图片标签的网页。使用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>

任何解决方案，将不胜感激。

来源

2011-09-14 carny666

使用Javascript无法检查任何文件信息。有什么办法可以将FTP传输到临时文件位置，并且有一个服务器端脚本在上载完成时将此临时文件复制到真实位置？ – mVChr

相机可以ftp到服务器上的任何文件夹。我试图避免服务器端代码，因为我不希望页面在更新时闪烁。如果我选择使用服务器端代码，我只需在加载页面/图像之前检查文件是否已打开。谢谢。 – carny666

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

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

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

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

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

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

来源

2011-09-14 15:12:13

唯一的问题是硬件ftping图像基本上是一个黑盒子。我所能做的就是设置ftp地址登录信息和时间参数。 – carny666

没关系，重要的是服务器中的脚本必须检查图像是否已经完全加载，然后才能让浏览器下载。 –

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

配置您的FTP服务器的文件保存的一个临时位置，直到上传完成后（不知道是否所有的FTP服务器都支持此）
如果相机支持某种形式的上传回调完整的（几千万），使用是触发副本，显示旧图像直到那时
如果没有那是一个选项，配置相机将文件上传到不同的位置比Web服务器的文档根目录，并运行定期将文件复制到最终位置的脚本（例如，从Web服务器上的一个目录到另一个目录）

来源

2011-09-14 15:12:28 Piskvor

该公司使用IIS FTP服务器，不知道这是可能的，但我会检查。相机没有这个选项。由于我想更新的频率，我觉得我可能遇到与＃3选项相同的问题。谢谢。 – carny666

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

来源

2011-09-14 15:13:45

我想我会碰到同样的问题，如果页面更新为'cron'作业正在运行。你不同意吗？ – carny666

那么你可以让cron作业创建一个标记，并在标记完成运行时删除标记，并且如果reloadImgs（）发现标记，他们可以跳过该刷新周期。创建并删除您可以检查的临时文件，某种标志来了解作业的状态。 –

也许你的相机系统错误地图像图像，否则图像有多大，你的连接有多慢，你有这个问题......无论如何，我可以建议一个解决方案，这将有助于我的看法。

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

来源

2011-09-14 15:19:12 haynar

我真的不认为使用jQuery会解决这个问题。 – carny666

使用Javascript重新加载图像源的问题

回答

相关问题