Jquery Fast image switching

Question

Hi,

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 need to load the subsequent maps into a hidden element first. Then when they're loaded, swap them in.

<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);
    });
}

Answer 2

You may still get a very slight flicker.

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