2

外部ページを にプルします<div>。コンテンツの読み込み中に読み込み中の画像がありますが、すぐに (コンテンツが読み込まれる前に) 消え、コンテンツが読み込まれるまでに数秒のギャップがあります。助言がありますか？

$(document).ready(function() { 
    var ajax_load = "<img class='loading' src='img/loader_large.gif'/>";
    $("#page_1").click(function(e) {
        e.preventDefault(); 
        $("#content").html(ajax_load).load("page_1.html");
    });
    $("#page_2").click(function(e) {
        e.preventDefault(); 
        $("#content").html(ajax_load).load("page_2.html");
    });
});
4

6 に答える 6

2

jQuery を使用して、別のハンドラーを介してドキュメントに ajax 呼び出しを認識させることができます。そうすれば、読み込み中の gif を管理し、必要な順序で表示および非表示を取得する場所が 1 か所だけになります。

これは jsfiddle デモです。

あなたの例で使用するには、次のようになります。

$(document).ready(function() {

    // removed your .html(ajax_load) in these
    $("#page_1").click(function(e) {
        e.preventDefault(); 
        $("#content").load("page_1.html");
    });
    $("#page_2").click(function(e) {
        e.preventDefault(); 
        $("#content").load("page_2.html");
    });

    // handlers for ajax events.
    // just make a hidden container with your loader in it and this will show/hide as necessary
    $(document).ajaxStart(function() {
        $(".ajax-load-container").show();
    }).ajaxComplete(function() {
        $(".ajax-load-container").hide();
    });
});
于 2013-07-10T20:51:45.717 に答える
0

みんなの意見に感謝し、いくつかの新しい方法を学びました。ありがとうございます。Instagram データをロードする .js ファイルからロードすることになります。この方法が最も効果的で、非常に単純です。

以下は、私がそれをどのように達成したかの例です。

$.ajax({
dataType:'jsonp',
url:url,    
beforeSend:function(){ $('.loader').html("<img src='img/loader_large.gif'/>");},
complete:function(){ $('.loader').html(""); }
});
};

CSS

 .loader { text-align:center; }

HTML

<div class="loader"></div>
于 2013-07-10T23:19:13.713 に答える
0

以下を試して、私に知らせてください：

$(document).ready(function() { 
//    var ajax_load = "<img class='loading' src='img/loader_large.gif'/>";
        var img = new Image();
        img.className = 'loading';
        img='img/loader_large.gif';
    img.onload = function(){
      $("#page_1").click(function(e) {
        e.preventDefault(); 

       // $("#content").html(ajax_load).load("page_1.html");
        $("#content").append(img).load("page_1.html");
      });
      $("#page_2").click(function(e) {
        e.preventDefault(); 
       // $("#content").html(ajax_load).load("page_2.html");
        $("#content").append(img).load("page_2.html");
      });
    }
});
于 2013-07-10T20:41:08.280 に答える
0

隠し画像を#content要素に入れます

    <div id="content"><img class='loading' style="display:none" src='img/loader_large.gif'/></div>

あなたのコンテンツがdivであると仮定します

と を使用ajaxStartしajaxStopて、表示と非表示を切り替えます。

     $(document).ajaxStart(function () {
            $('.loading').show();
        });
        $(document).ajaxStop(function () {
            $('.loading').hide();
        });
于 2013-07-10T20:41:44.657 に答える
0

すべてが起こる可能性があり、カウンターがすぐに終了する可能性があるため、カウンターを当てにすることはできません。読み込み中の画像を削除している場所が正確にわかりません。.html ファイルのどこかにあるはずだと思います。しかし、あなたが言ったように、ページが読み込まれた後に終了するajax呼び出しがあるため、もう一度言ったようにギャップが生じます。すべての ajax 呼び出しが相互に依存している場合は、それらをネストして、最後の呼び出しから読み込みを削除します。このようにして、すべてのコンテンツが確実に読み込まれるようになります。しかし、これらの ajax 呼び出しは独立している可能性が高くなります。するとカウンターが作れます。ajax 呼び出しの準備が整うたびに、カウンターをインクリメントします。カウンターが ajax 呼び出しの数と等しい場合、読み込み中の画像を削除します。

于 2013-07-10T20:42:22.400 に答える
-1

コンテンツを非表示の div にロードして、#content を置き換えていただけますか?

このようなもの：

$(function()
{ 
    var ajax_load = "<img class='loading' src='img/loader_large.gif'/>";

    $("#page_1").click(function(e)
    {
        e.preventDefault(); 
        $("#content").html(ajax_load);
        var content = $('<div />').load("page_1.html");
        $('#content').html(content.html());
    });

    $("#page_2").click(function(e)
    {
        e.preventDefault(); 
        $("#content").html(ajax_load);
        var content = $('<div />').load("page_2.html");
        $('#content').html(content.html());
    });
});
于 2013-07-10T20:24:04.433 に答える