Changing imsg src from one to another shows a 'flick'

I have an img elment with an image. For instance:

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

When user clicks on it, I want to make a fadeOut, change its src to another image, and then 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)
        {开发者_如何学C
            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);
    }

Sometimes I see the following:

1. Card.png fadeOut.
2. No image (0.1 seconds)
3. Card.png again (0.1 seconds).
4. newImage.png fadeIn.

I want to avoid step 3.

Any advice?

As this example shows, you could put all your images at start in display none. Than use jQuery fadeIn and fadeOut to show the right image. All you need is to put them in an position:relative div and define them as position:absolute :

<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

Supposing you have more that 2 pictures to show (as a slideshow) You could try using two images, one on top of the other. One is the image you are actually displaying, the other is the one you need to show when the first fades. This way, you can fade the first, showing the bottom one. When the fade animation is ended you place it (callback) under the other one and change its src. There will be no flickering, as you load it in the background. If you have only 2 images, then the fading is enough to cycle between the images.

Another solution that may solve your problem is to preload your images and store them in the cache. If i'm not wrong, it could solve the problem.

Sorry I provide no code, but I'm at work.... anyway if you need more details tell me.