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