Question

I have a php class that generates a map image depending on my db data. It is periodically updated thru a serInterval loop.

I am trying to update it with no flickering but I just can’t. I’ve tried different methods (preloader, imageswitcher) with no success.

//first load

function map()  {

$("#map").html("<img src=map.php?randval="+Math.random()+">");
}


//update it from setInterval calls

function updatemap()  {

$("#map").fadeOut(function() { 
      $(this).load(function() { $(this).fadeIn(); }); 
      $(this).attr("src", "map.php?randval="+Math.random()); 
    })
 }

Is there any way to update the image with no flickering at all? I would prefer an inmediate swap insteado of a fade.

The problem I’m having is that after calling updatemap() the image just dissapears. ¿Maybe it is a problem with the attribute src I am parsing?

THanks for your help.

Answer 1

You may still get a very slight flicker.

function updatemap() {
    var img = new Image();
    img.onload = function(){
        $("#map img").attr("src", img.src);
    }
    img.src = "map.php?randval="+Math.random();
}