imsg srcを別のものに変更すると、「フリック」が表示されます

Question

イメージに画像があります。例えば：

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

ユーザークリックすることでが、私はフェードアウトを作りたい、別の画像にそのSRCを変更し、フェードイン。

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フェードアウト。
2. 画像がありません（0.1秒）
3. Card.pngもう一度（0.1秒）。
4. newImage.pngフェードイン。

私はステップ3

どれでもアドバイスを避けたいですか？

Answer 1

この例で示すように、すべての画像を最初に表示なしにすることができます。正しいイメージを表示するには、jQuery fadeInとfadeOutを使用します。あなたが試みることができるあなたは2枚の画像は（スライドショーのように）表示することをより多くのを持っていると仮定すると

<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

：相対divの位置としてそれらを定義します：絶対必要なのは、位置にそれらを置くことです2つのイメージを使用して、1つはもう一方の上に表示されます。 1つは実際に表示している画像、もう1つは最初に消えるときに表示する必要がある画像です。 この方法で、最初のものをフェードインし、下のものを表示することができます。フェードアニメーションが終了したら、もう一方のフェーズアニメーションにコールバックを置き、srcを変更します。あなたはバックグラウンドでそれをロードすると、ちらつきはありません。 画像が2枚しかない場合は、フェーディングは画像間を移動するのに十分です。

問題を解決する別の解決策は、画像をプリロードしてキャッシュに保存することです。私が間違っていなければ、問題を解決することができます。

申し訳ありませんコードはありませんが、私は仕事中です....とにかく詳細が必要な場合は、とにかく教えてください。