Изменение imsg src от одного к другому показывает «flick»

Question

У меня есть img elment с изображением. Например:

<img id='imageWord' src=images\Card.png onclick='changeImage();'> 

Когда пользователь нажимает на него, я хочу сделать FADEOUT, изменить его SRC на другое изображение, а затем FadeIn.

function changeImage() 
{ 
    $('#ImageWord').animate({opacity:0}) 
    .queue(function(){ 
     $(this).attr("src", ''); 
     replaceImage('#ImageWord', 'images\newImage.png'); 
     $(this).dequeue() 
    }) 
    .animate({opacity:1}); 
} 

var MAX_HEIGHT = 260; 
var MAX_WIDTH = 260; 

    function keepAspectRatio(temp, target, url) 
    { 
     $(target).removeAttr('style'); 

     // Get height and width once loaded 
     var realHeight = temp.height; 
     var realWidth = temp.width; 

     // Get how much to divide by (1 if image fits in dimensions) 
     // Get rid of ", 1" if you just want everything to be either 
     // MAX_HEIGHT tall or MAX_WIDTH wide 
     var factor = Math.max(realHeight/MAX_HEIGHT, realWidth/MAX_WIDTH, 1); 
     realHeight /= factor; 
     realWidth /= factor; 

     // Set the target image's source, height and width 
     $(target).attr("src", url).css({height: realHeight, width: realWidth}); 

     if (realWidth != MAX_WIDTH) 
     { 
      var offsetX = (MAX_WIDTH - realWidth)/2; 
      var sum = parseFloat($(target).css("left").replace("px", "")) + offsetX; 
      $(target).css("left", sum); 
     } 
     if (realHeight != MAX_HEIGHT) 
     { 
      var offsetY = (MAX_HEIGHT - realHeight)/2; 
      var sum = parseFloat($(target).css("top").replace("px", "")) + offsetY; 
      $(target).css("top", sum); 
     } 
    } 

    function replaceImage($target, url) { 
     $("<img>").load(function() { 
     keepAspectRatio(this, $target, url); 
     }).attr("src", url); 
    } 

Иногда я вижу следующее:

1. Card.png FADEOUT.
2. Нет изображения (0.1 секунд)
3. Card.png снова (0,1 секунды).
4. новыйImage.png fadeIn.

Я хочу, чтобы избежать Шаг 3.

Любые советы?

Answer 1

Как показано в этом примере, вы можете поместить все свои изображения при запуске на дисплее. Затем используйте jQuery fadeIn и fadeOut, чтобы отобразить правильное изображение. Все, что вам нужно, чтобы поместить их в положение: относительный ДИВ и определить их как позицию: абсолютная:

<div class="slideshow" style="position: relative; "> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; "> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; "> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" style="position: absolute; z-index: 6; top: 0px; left: 0px; display: block; width: 200px; height: 200px; opacity: 1; "> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; "> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; "> 
</div> 

http://jquery.malsup.com/cycle/basic.html

Answer 2

Предположив у вас есть больше, что 2 фотографии, чтобы показать (как слайд-шоу) Вы могли бы попробовать используя два изображения, один поверх другого. Один - это изображение, которое вы на самом деле показываете, другое - это тот, который вам нужно показать, когда первый затухает. Таким образом, вы можете исчезнуть первым, показывая нижний. Когда анимация затухания заканчивается, вы помещаете ее (обратный вызов) под другой и меняете ее src. Не будет мерцания, когда вы загрузите его в фоновом режиме. Если у вас всего 2 изображения, то затухания достаточно, чтобы циклически переключаться между изображениями.

Другим решением, которое может решить вашу проблему, является предварительная загрузка изображений и сохранение их в кеше. Если я не ошибаюсь, это может решить проблему.

Извините, я не предоставляю никакого кода, но я нахожусь на работе .... в любом случае, если вам нужно более подробно рассказать мне.