将 imsg src 从一个更改为另一个会显示“轻弹”；

Question

我有一个带有图像的 img 元素。例如：

<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 fadeOut。
2. 无图像（0.1 秒）
3. 再次出现 Card.png（0.1 秒）。
4. newImage.png 淡入。

我想避免第 3 步。

有什么建议吗？

Answer 1

如本示例所示，您可以将所有图像放在不显示的开头。比使用 jQuery fadeIn 和 fadeOut 来显示正确的图像。您所需要做的就是将它们放在position:relative div 并将它们定义为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

Answer 2

假设您有超过 2 张图片要显示（作为幻灯片），您可以尝试使用两张图片，一张放在另一张上面。一个是您实际显示的图像，另一个是您在第一个图像消失时需要显示的图像。
这样，您可以淡出第一个，显示底部。当淡入淡出动画结束时，您将其（回调）放置在另一个动画下方并更改其 src。当您在后台加载它时，不会有闪烁。
如果只有 2 个图像，则淡入淡出足以在图像之间循环。

另一个可以解决您的问题的解决方案是预加载图像并将其存储在缓存中。如果我没记错的话，应该可以解决问题。

抱歉，我没有提供代码，但我正在工作......无论如何，如果您需要更多详细信息，请告诉我。