jquery - jqueryで画像をロードする:サファリに表示されない

Question

重複の可能性:
画像読み込み時の jQuery コールバック (画像がキャッシュされている場合でも)

#mainImg imgのプロパティを持つ がありますopacity:0;。

ページが読み込まれると、次の jQuery コードをトリガーします。

$("#mainImg img").load(function(){ 
   $("#mainImg img").center(); // center everything
   $("#mainImg img").animate({"opacity": "1"}, "400"); // fade the image in
});

firefox/chrome/safari で動作します。.load()Webkit ブラウザーでは、画像が読み込まれた後に幅と高さが設定されるため、この方法を使用します。

しかし、サムネイルをクリックして別の画像を読み込もうとすると、その画像はサファリでは機能しません (そしてクロムとファイアフォックスでも機能します)。

サムネイルシステムのコードは次のとおりです。

$("#th2").click(function() {
    $("#mainImg").html('<img src="' + new_th2_link + '" />');
    $("#mainImg img").load(function(){ 
        $("#mainImg img").center();
        $("#mainImg img").animate({"opacity": "1"}, "400");
    });
});

Safari#mainImg imgでは、 のプロパティがありwidth:0; height:0;ます。Safari は速すぎますか?

Answer 1

これが私が最終的に使用したソリューションです：

$("#mainImg img").animate({"opacity": "1"}, "400");
    setTimeout(function(){
        $("#mainImg img").center()
    }, 10);

Firefox/Chrome/Safari で動作します。