Quickly switch jQuery images

Question

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

I am trying to update it without flickering, but I just can't. I tried different methods (preloader, imageswitcher) without 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 a way to refresh the image without any flicker? I would prefer an intermediate exchange instead of fading.

The problem I ran into is that after calling updatemap (), the image just disappears. ¿Maybe this is a problem with the src attribute? Am I understanding?

Thanks for the help.

Answer 1

You can still get very little flicker.

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

Answer 2

First you need to load the subsequent cards into the hidden element. Then, when they are loaded, replace them.

 <div id = "map"></div> <img id = "load-map" src = "" alt = "" /> $(document).ready(function(){ $("#map").html("<img src=map.php?randval="+Math.random()+">"); setTimeout(loadImage,5000); } function loadImage() { $("#load-map") .attr('src','map.php?randVal='+Math.random()) .load(function(){ $("#map img").src($("#load-map").src); setTimeOut(loadImage,5000); }); }