Question

我正在创建一个网站，从远程系统传输实时数据图像并将其显示在网站上。这些图像每隔5秒在远程站点发生变化，因此我们会自动重新加载/刷新这些图像。问题：图像刷新正确且＆amp;在IE和Chrome上顺利运行，但在Firefox中，每次自动刷新都会导致闪烁。这是不受欢迎的行为。我该如何解决？ PS 我正在使用joomla文章，其中嵌入了所需的javascript

     <center>  
     <img id="pic" src="images/CB1.jpeg" border="0" width="700" height="700"/></center>
     <script language="javascript" type = "text/javascript">
      function refresh() 
       {         
      document.images["pic"].src = "images/CB1.jpeg" + "?" + new Date().getTime();
       }
      window.onload=function(){
      setInterval(function(){refresh()}, 5000 ); 
      }
     </script>

这是脚本嵌入在joomla文章中。图像大约为300~350 KB。

Answer 1

无法在您的机器上进行测试，我无法肯定地说，但我认为Cobra_Fast是正确的，因为图像在完成加载之前呈现。要解决此问题，请确保在新图像加载完成之后才更换旧图像。这应该有效：

<img id="pic" src="images/CB1.jpeg">

<script language="javascript" type = "text/javascript">
function refresh() {
    // create new image obj
    var image = new Image();

    // replace the existing image once the new image has loaded
    image.onload = function () {
        document.images["pic"].src = image.src;
    }

    // set the source of the new image to trigger the load 
    image.src = "images/CB1.jpeg" + "?" + new Date().getTime();
}

window.onload=function(){
    setInterval(function(){refresh()}, 5000 ); 
}
</script>

图像重新加载仅在firefox中导致闪烁

1 个答案: