jquery - コンテンツの読み込みが完了する前に Jquery が実行される

Question

load() を使用して、「contents」という名前の div に何かをロードし、ロードを開始する前に非表示にします。コンテンツが完全にロードされた後にのみdivがフェードインすることを望みますが、ロードが完了する前でもdivの「コンテンツ」がフェードインするようです。次のスクリプトを使用します。

$("#menu").click(function(){
        $("#contents").hide().load(loadUrl, function(){
            $(this).fadeIn(1000);});
    });

この問題を解決するのを手伝ってくれませんか？現在、ローカルサーバーでテストしています。

Answer 1

以下のように使用してください。

$("#contents").hide().load(loadUrl, function(){ }).fadeIn(1000);

Answer 2

ブラウザの再描画の問題のように見えます.fadeInが呼び出される前にタイムアウトを与えると問題が解決するはずです.

$("#menu").click(function(){
    $("#contents").hide().load(loadUrl, function(){
        var el = $(this);
        setTimeout(function(){
            el.fadeIn(1000);
        }, 100)
    });
});

遅延機能を使ってみることもできます

$("#menu").click(function(){
    $("#contents").hide().load(loadUrl, function(){
        $(this).delay(10).fadeIn(1000);
    });
});