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が2回呼び出されることがあります（1回はifステートメントのため、1回はキャッシュされた画像でも常に.loadを呼び出すため）。この場合、ブールフラグを追加して、画像が処理されているかどうか。

于 2012-07-25T11:05:38.267 に答える