1

写真とテキストのページがたくさんあります。ページが ajax を介して完全に読み込まれたとき (つまり、すべての写真とテキスト) にのみ、「読み込み中のページ」を非表示/削除したいと考えています。

これが私のコードです:

<html>
<head>

<script src="./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#txt").ajaxSend(function() {
            $("#wait").css("display", "block");
        });
        $("#txt").ajaxComplete(function() {
            $("#wait").css("display", "none");
        });
        $("button").click(function() {
            $("#txt").load("randomPage.html", function() { //randomPage.html have pics and text
            });
        });
    });
</script>
</head>
<body>

<div id="txt"></div>
<img src="loader.gif" alt="" id="wait" style="display: none">
<button>click me!</button>
</body>
</html>

ご返信ありがとうございます。

4

2 に答える 2

2

直接関数 $.ajax を使用してみることができます。

//Show the Loader
$.ajax({
  url:"<<your request url>>",
  success:function(data){
   //Removing the loader    
  }
});
于 2013-01-04T07:30:26.923 に答える
1

テキストはすぐに表示され、画像の場合はページにある画像の数を数え、それらの画像の読み込みイベントにカウンターを設定し、すべてが表示されたらローダーを非表示にできると思います。

$("button").click(function() {
    $("#wait").css("display", "block");
    $.get('randomPage.html', function(page) {
       var m = page.match(/<img /g);
       if (m) {
         var counter = 0;
         $("#txt").html(page).find('img').load(function() {
             counter++;
             if (counter == m.length) {
                $("#wait").css("display", "none");
             }
       } else {
         $("#txt").html(page);
         $("#wait").css("display", "none");
       }
    });
});
于 2013-01-04T07:33:43.043 に答える