0

我现在正在建一个画廊。单击缩略图时，该图像的全尺寸版本显示在div. 所有图像的宽度相同，但高度不同。为了避免任何跳跃，我编写了脚本，使容器的高度动画以适应新的高度。

编码：

$(document).ready(function() {
    var thumb = $(".thumb");
    var bigImage = $("#big-image").find("img");
    var bigImageContainer = $("#big-image");

    thumb.click(function(e){
        var hrefToFull = $(this).find("a").attr("href"); // getting the fullsize link of clicked thumb
        var bigSrc = bigImage.attr("src"); // src of current big image
        var oldHeight = bigImage.height();

        e.preventDefault();

        bigImageContainer.css("height", oldHeight); // height = height of current img

        bigImage.fadeOut(500, function(){ // fading the image out
            bigImage.attr("src", hrefToFull); // changing src

            bigImage.load(function() { // when new image is loaded
                var newHeight = bigImage.height(); // height = height of new img
                bigImageContainer.animate({height:newHeight}, 600); // animate height
                bigImage.fadeIn(500); // fading it in again
            })
        });
    });
});

它应该做什么：

一开始我设置了一些变量，比如div包含大图和大图本身。单击拇指时，我会获得新大图像的 URL/src 和当前大图像的 URL/src。我还分配了一个变量来保存当前大图像的高度。然后我将容器的高度设置为当前图像的高度，虽然我不确定这是否真的需要。

然后，旧图像淡出，并用src新图像的源替换它的源。加载新图像时，我将它的高度分配给一个变量，并告诉父级的高度div应该被动画以匹配该高度。毕竟这一切，我淡入新的形象。

它能做什么：

实际上，它有效。但有时，动画只是停止工作。这会导致大图像与拇指重叠，或者导致大图像下方有很多空间。所以我的猜测是动画速度或load.

您看到此代码有什么不正确的地方吗？什么可能导致错误的动画？

4

1 回答 1

1

这可能是由于您的浏览器缓存了大图像，如果图像被缓存，.load则并不总是调用该函数。（我相信这取决于浏览器是否决定调用它）

我倾向于通过执行以下操作来解决此类问题

而不是这样的代码：

img.load(function() {
    //do some stuff once image loaded
});

我执行以下操作：

function doStuffToImage() {
    //do stuff to image
}

img.load(function() {
    doStuffToImage();
});

if(img.width() != 0)
    doStuffToImage();

由于.load()是异步的，您可能会发现在某些浏览器中 doStuffToImage 被调用了两次（一次是因为 if 语句，一次是因为某些浏览器即使在缓存的图像上也总是调用 .load）在这种情况下，您可能需要添加一个布尔标志来确定是否图像是否已处理。

于 2012-07-25T11:05:38.267 回答