Question

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

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

否则，用户可以导航A.可能无法完全正确呈现的页面，或者当网站在完全加载时刷新到Home时，将导航到中间导航。

我遇到了解决方案的内容，但不确定如何实施。或把两者放在一起...... 大学项目到目前为止，从专业，但这些看起来很有希望...

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

https://stackoverflow.com/a/12313138/2676129

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

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

我怎么能让这个工作？我的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)
                }
            }
        });

Answer 1

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

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

之后，我们确保在ajax调用分别开始和停止时显示或隐藏此div。

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

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

最后，添加以下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;
}

Demo JSFIDDLE here

Answer 2

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

然后，等待你的杰出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>

使用这样的样式：

#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);
}

真正的长过渡时间和大旋转是模拟永远的动画。您也可以使用CSS3动画，动画GIF或其他来替换它，以获得您想要的效果。

Demo fiddle（注意：它只是使用setTimeout伪造回调来隐藏加载器）

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

2 个答案: