将imsg src从一个更改为另一个显示'轻弹'

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

本文关键字：另一个 显示 轻弹 一个 src imsg      更新时间：2023-09-26

我有一个带有图像的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. newImage.png fadeIn

我想避免第三步。

有什么建议吗？

如本例所示，您可以在开始时将所有图像都显示为none。然后使用jQuery fadeIn和fadeOut来显示正确的图像。您只需要将它们放在position:relativediv中，并将其定义为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

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

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

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

相关文章：