Question

我正在建立一个画廊。单击缩略图时，该图像的完整版本将显示在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都有问题。

你看到这个代码有什么不对吗？什么可能导致错误的动画？

Answer 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），在这种情况下你可能需要添加布尔标志以确定图像是否已被处理。

动画容器高度以适应动态更改的图像高度 - 功能并不总是有效 - jQuery

1 个答案: