javascript - 图像重新加载仅在 Firefox 中导致闪烁

Question

我正在创建一个网站，该网站从远程系统传输实时数据图像并将其显示在网站上。这些图像在远程站点每 5 秒更改一次，因此我们会自动重新加载/刷新这些图像。 问题:图像刷新在 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>