How do I stop my heatmap from flickering?

I am making a page that displays data in the form of a heatmap. The script that writes the image to the page runs every second. As I am plotting from live data, it's very important that the heatmap updates every second.

The problem is that my image flickers. How can I get rid of that flicker?

I can't cache it as I need to change it. If the image flickering cannot be stopped, can it be given some smooth transition?

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

    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>

It looks like you're feeding a SRC URL to the image using JavaScript that runs an AJAX call once a second to get fresh data. I suspect that the image is probably flickering because of network latency -- it takes a moment for the fresh image data to download and then get updated.

You might try introducing a one-second delay into the script. Use two images, one on screen for the currently displayed data, and one offscreen. Load fresh info into the off screen image. Then, swap the positions of the two images (onscreen goes off, offscreen goes on). Because the fresh data would be loaded into an image outside the viewport, the download wouldn't happen visibly. Just moving it into position should take place with no perceptible flicker.

It would go something like this (this is pseudo code that won't necessarily run). First, some HTML -- just a couple of images.

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

Then some 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; }

Lastly some 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();
});

Assuming you have a reasonably speedy and reliable connection, something like that should take care of flickering caused by network latency. It does introduce a one second delay -- the currently displayed image will always be one second behind realtime. But if real time synchronicity is important to you, then HTML/CSS/JavaScript is probably the wrong tool for the job.

If there's some OTHER cause for your flickering, well, good luck.