如何阻止我的熱圖出現閃爍現象？

我正在製作一個以熱圖形式顯示數據的頁面。將圖像寫入頁面的腳本每秒運行一次。當我從實時數據繪圖時，熱圖每秒更新非常重要。如何阻止我的熱圖出現閃爍現象？

問題是我的圖像閃爍。我怎樣才能擺脫這種閃爍？

我無法緩存它，因爲我需要更改它。如果圖像閃爍無法停止，是否可以進行平滑過渡？

<script type="text/javascript" charset="utf-8"> 
function toggle (mainImage, backupImage) { 
    //$("#imagecontainer").load("./php/sarimage.png"); 

    var refreshId = setInterval(function() { 
    var ele = document.getElementById(mainImage); 
    var imageEle = document.getElementById(backupImage); 
    var randomnumber=Math.floor(Math.random()*101); 
    var source ="./php/sarimage.png?dummy="; 
    source = source.concat(randomnumber); 
      imageEle.src = source; 
    $("#imagecontainer").load(source); 
    ele.src= imageEle.src; 
    }, 1000); 
    $.ajaxSetup({ cache: false }); 
    } 

</script>

來源

2011-08-15 trailblazer

是的，這是可能的。閃爍是現在如何更新，這是發佈的相關信息。 – 2011-08-15 03:32:48

我正在使用ajax來更新！ – trailblazer

編號AJAX可能會「獲取數據」（可能是一些HTML）。這就是*元素*如何更新。 – 2011-08-15 03:33:26

它看起來像你喂SRC URL使用運行AJAX調用一次，第二次獲得的新數據的JavaScript的圖像。我懷疑由於網絡延遲導致圖像可能閃爍 - 新圖像數據下載並更新需要一些時間。

您可能會嘗試在腳本中引入一秒延遲。使用兩個圖像，一個在屏幕上顯示當前顯示的數據，另一個在屏幕外。將新鮮信息載入屏幕外圖像。然後，交換兩個圖像的位置（屏幕熄滅，屏幕亮起）。由於新數據將被加載到視口外的圖像中，因此下載不會明顯發生。只要將它移動到位置上就不會有明顯的閃爍。

它會像這樣（這是僞代碼，不一定會運行）。首先，一些HTML - 只是幾個圖像。

<img src="initial.png" alt="heatmap" class="heatmap onscreen" /> 
<img src="loading-area.png" alt="heatmap" class="heatmap" />

然後一些CSS：

/* By default heatmaps are off screen. */ 
.heatmap { position: absolute; left: -999em; } 

/* But then we override that for ones marked as on screen. */ 
.heatmap.onscreen { position: static; left: auto; }

最後一些JavaScript。

var firstRun = true; 

function loadNewImage(){ 
    // Download fresh image and load it into an image OFF SCREEN. 
    var imagePath = '/path/to/image.png?dummy='+Math.floor(Math.random()*101); 
    $(".heatmap:not(.onscreen)").attr("src", "imagePath"); 
} 

function updateImage(){ 
    if(firstRun){ 
     // The first time this function runs, load new data ... 
     loadNewImage(); 

     // Now make a note that the function has run already. 
     firstRun = false; 

     // And return without doing anything else. 
     return false; 
    } else { 
     // The off screen image has fresh data by this time. Swap it. 
     $(".heatmap:not(.onscreen)").addClass("next"); 

     // Remove the onscreen class from the current image, so it 
     // moves off screen. 
     $(".onscreen").removeClass("onscreen"); 

     // Add onscreen to the next one, moving it into place. 
     $(".next").addClass("onscreen"); 

     // Remove the "next" class from the newly displayed image. 
     $(".next").removeClass("next"); 

     // Load more image data. 
     loadNewImage(); 
    } 

    // Lastly, call this same function again in a second. 
    window.setTimeout(updateImage, 1000); 
} 

$(document).ready(function(){ 
    // Start the swapping. 
    updateImage(); 
});

假設你有一個合理的快速和可靠的連接，類似的東西應該照顧由網絡延遲引起的閃爍。它確實引入了一秒延遲 - 當前顯示的圖像將始終比實時滯後一秒。但是，如果實時同步對你來說很重要，那麼HTML/CSS/JavaScript可能是這項工作的錯誤工具。

如果您的閃爍有其他原因，那麼祝您好運。

來源

2011-08-16 06:05:42

如何阻止我的熱圖出現閃爍現象？

回答

相關問題