显示ajax微调器，隐藏页面渲染直到所有ajax调用完成？

我正在构建一个包含大量ajax调用的web应用程序，我正在使用100多个ajax调用将我的所有内容注入到我的web应用程序中

我希望找到一种隐藏页面并显示ajax微调器的方法，直到所有ajax调用完成。。。和/或加载整个应用程序，然后显示站点

否则，用户可以浏览A.可能未正确完全呈现的页面，或B.在站点完全加载后刷新到主页时处于中间导航状态的页面

我偶然发现了一个解决方案，但不知道如何实施。或者把两者放在一起。。。 大学项目远不是专业项目，但这些看起来很有希望

我怎样才能让它工作呢？我的ajax调用在应用程序的不同部分的许多.js文件中被引用

非常感谢您的帮助

编辑：使用的示例ajax调用

$.ajax(
        {
            url: "http://myurl",
            type: 'get',
            dataType: 'jsonp',
            success: function(data)
            {
                if (data.result == 'success')
                {
                    var previousPageID = "";
                    var currentPageID = "";
                    $.each(data.data, function(key, data)                 //scans through each Lv1 Category, creates a button and page and links thems.
                    {
                        var divLabel = data.label;
                        var pageID = currentPageID + data.label.replace(/\s/g, "");
                        $('#contentPage').append(generateButtons(pageID, divLabel));                                                       //generates a normal button for a category from CMS and generates the relevant page to link to.
                        var previousPageID = currentPageID;
                        generateNextPage(data, previousPageID);
                    });
                    $("#Page").trigger("create");                                              //once html is injected into home <div> applies jquery mobile styling and effects (enhance)
                }
            }
        });

---

一种方法是将加载动画显示为初始页面和页面加载的一部分

然后，等待未完成的ajax调用达到零，一旦达到零，隐藏加载动画

您的文档已准备就绪，如下所示：

$(document).ready(function() {
    $('#spinner').addClass('spin');

    function stopSpinner() {
        $('#loading').addClass('hide');
        $('#loading').one('webkitTransitionEnd', function() {
            $('#loading').hide();
        });
    }

    $(document).ajaxStop(function () {
        // $.active == 0 
        stopSpinner();
    });
});

您的标记将具有以下内容作为主体中的最后一个元素：

<div id="loading">
    <div id="spinner"></div>
</div>

很长的过渡时间和较大的旋转可以模拟永久的动画。您也可以使用CSS3动画、动画GIF或其他方式来替代此功能，以获得所需的效果

---

注意：它只是使用setTimeout来伪造回调以隐藏加载程序

只是想指出一个更简单但有效的解决方案。 您需要将此加载div附加到页面

<div id="loading"></div>

最后，添加以下CSS以确保div将全屏显示，就像一个阻塞的UI元素，这表明页面正在加载一些东西/而不是微调器

#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    -webkit-transition: all .5s ease;
    z-index: 1000;
    display:none;
}

---

嗨，谢谢你给我回电话并抽出时间。按原样放入测试，微调器按小提琴显示，但不幸的是，在所有ajax完成后从未隐藏。我自己没有使用$.ajaxStop，但从文档来看，它应该可以工作。不过还有一点需要注意：如果在全局选项设置为false的情况下调用$.ajax或$.ajaxSetup，.ajaxStop方法将不会触发。我不知道这是否适用于您的代码。下面是一个例子，说明如何使用出色的ajax调用。它将jsfiddle.net加载到结果div中。警报显示未完成请求的数量。编辑：包含示例ajax调用@dc5我将进一步研究它，感谢您的努力，它显然应该可以工作…我祈祷我的ajax调用真的结束。。。我的控制台说是的，.ajaxstop他显然说不。hi@dc5谢谢你的输入。在谷歌搜索了一点之后，我设法让一个旋转器工作，不是用ajaxstart/stop，而是用你用来演示小提琴功能的设置计时器。一旦我根据需要调整了时间！谢谢你的间接帮助！如果ajax不是通过jQuery触发的，那么这个方法有效吗？@FrozenFlame如果您根本不想使用jQuery，那么您需要替换决定ajax调用何时开始或结束的部分。如何进行ajax调用xmlhttprequests？

#loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    -webkit-transition: all .5s ease;
    z-index: 1000;
}

#loading.hide {
    opacity: 0;
}

#spinner {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    background-color: yellow;
    -webkit-transition: all 1000s linear;
}

#spinner.spin {
    -webkit-transform: rotate(100000deg);
}

<div id="loading"></div>

    $(document).ajaxStop(function () {
        $('#loading').hide();
    });

    $(document).ajaxStart(function () {
        $('#loading').show();
    });

#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    -webkit-transition: all .5s ease;
    z-index: 1000;
    display:none;
}