圖像重新加載導致閃爍只在Firefox中

我創建一個網站，從遠程系統實時數據圖像流，並顯示在網站上。這些圖像每5秒在遠程站點發生變化，因此我們會自動重新加載/刷新這些圖像。問題：在IE和chrome上圖像刷新正常發生&，但在Firefox中，每次自動刷新都會導致閃爍。這是不想要的行爲。我該如何解決？ PS我使用Joomla的文章中，我嵌入需要的JavaScript圖像重新加載導致閃爍只在Firefox中

 <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之間。

來源

2013-02-05 alpana

你有一個演示頁面，我們可以看看嗎？ –

你可以把兩個''放在一起，重新加載底部（不可見）的一個，當它通過'onload'加載時，將它移動到前面。我相信閃爍來自FF已經呈現圖像，而它仍然被加載。 –

@scourou感謝您的快速回復。對不起，我無法提供網站的網址，因爲該網站位於我辦公室的本地計算機上，而且我目前還沒有網域。因此，我添加了我正在使用的代碼。如果您將此代碼放置在正常的HTML頁面中，它將提供相同的行爲。謝謝 – alpana

不能在你的機器上測試，我不能肯定地說，但我認爲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>

來源

2013-02-05 15:42:30

嗨，我試着運行你提供的代碼。它仍然閃爍:(我是否使用你的代碼，或者我需要定製它？對不起，如果我的問題聽起來很愚蠢。我不是很熟悉javascript！ – alpana

我在FF中測試了這個測試圖像，我沒有閃爍 - 只是一個瞬間的變化，也許這不是一個加載問題，你可以上傳你使用的圖像，所以我可以用它們測試嗎？只需要兩個連續的圖像。 –

感謝您抽出時間來測試並讓我知道，我在這裏面臨着一個困境，劇本給出了兩個測試m/cs的閃爍，但在第三天，它表現得很好，我不知道可能是什麼主辦公機器是一臺運行18.0.1 Firefox的windows 2008 r2服務器...感謝所有的幫助 – alpana

圖像重新加載導致閃爍只在Firefox中

回答

相關問題