0

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

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

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

我遇到了解决方案的胆量，但不确定如何实施。或者将两者放在一起......大学项目离专业人士还很远，但这些看起来很有希望......

https://stackoverflow.com/a/14038050

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

2 回答 2

10

只是想指出一个更简单但有效的解决方案。您需要将此加载 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;
}

在这里演示 JSFIDDLE

于 2015-03-14T05:56:29.877 回答
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 或其他以获得您想要的效果。

演示小提琴（注意：它只是使用 setTimeout 来伪造回调以隐藏加载器）

于 2013-08-28T23:14:19.120 回答