Jquery快速图像切换

Question

我有一个php类，它根据我的数据库数据生成一个地图图像。 它通过serInterval循环定期更新。

我试图更新它没有闪烁，但我不能。 我尝试了不同的方法（preloader，imageswitcher）但没有成功。

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

有没有办法更新图像，没有闪烁？ 我宁愿中等交换而不是淡入淡出。

我遇到的问题是，在调用updatemap（）之后，图像就会消失。 ¿也许这是我正在解析的属性src的问题？

谢谢你的帮助。

Answer 1

你可能仍会得到一个非常轻微的闪烁。

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

Answer 2

您需要先将后续地图加载到隐藏元素中。 然后当它们被加载时，将它们交换进去。

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