Question

我有很多页面的图片和文字。我只想在通过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>

感谢您的回复。

Answer 1

您可以尝试使用直接函数$ .ajax。

//Show the Loader
$.ajax({
  url:"<<your request url>>",
  success:function(data){
   //Removing the loader    
  }
});

Answer 2

我认为文本会立即显示，对于图像，您可以计算页面中有多少图像，并在这些图像的加载事件中设置计数器，并在它们全部出现时隐藏加载程序。

$("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");
       }
    });
});

页面完全加载后，消失加载

2 个答案: