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

【问题标题】：Changing imsg src from one to another shows a 'flick'将 imsg src 从一个更改为另一个显示“轻弹”
【发布时间】：2011-06-23 11:52:29
【问题描述】：

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

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

当用户点击它时，我想做一个fadeOut，将它的src更改为另一个图像，然后fadeIn。 p>

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

有时我会看到以下内容：

Card.png 淡出。
无图像（0.1 秒）
再次 Card.png（0.1 秒）。
newImage.png 淡入。

我想避免第 3 步。

有什么建议吗？

【问题讨论】：

标签： javascript html image fadein fadeout

【解决方案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

【讨论】：

感谢您的回答。循环插件看起来很棒，但我不想要循环。我想，我可以定制它。

【解决方案2】：

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

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

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

【讨论】：