Question

在我的网站（MVC和网络API）上，我添加了一个预加载器，以提供更好的用户体验。

我在两点添加了预加载器：

登录后，用户通过身份验证并重定向到主页。
在每个从服务器加载数据的页面中。

我在页面/数据加载时使用show的图像，并在数据完全加载时使用hide。

<div id="dvReqSpinner" style="display: none;">
  <br />
  <center><img src="~/images/loading_spinner.gif" /></center>
  <br />
</div>

使用jquery我show和hide：

$("#dvReqSpinner").show();
$("#dvReqSpinner").hide();

每次我需要加载数据时都要显示和隐藏图像（使用对Web API的AJAX调用，对用户进行身份验证等等），这有点令人讨厌。 - 每个需要时间的操作，我想要向用户显示某些事情正在发生＆＃34;），是否有任何＆＃34;自动＆＃34;在网站上有预加载器的选项？

Answer 1

我不知道是否是这种情况，但如果你使用jquery ajax来处理你的请求，你可以这样做：

$(document).ajaxStart(function() {
   // every time a request starts
   $("#dvReqSpinner").show();

}).ajaxStop(function() {
   // every time a request ends
   $("#dvReqSpinner").hide();

});

修改如果你想避免显示微调器的快速请求，我认为这可以使它工作：

var delayms = 3000; // 3 seconds var spinnerTimeOut = null; $(document).ajaxStart(function() { // for every request, wait for {delayms}, then show spinner if(spinnerTimeOut!=null){ clearTimeout(spinnerTimeOut); } spinnerTimeOut = setTimeout(function(){ $("#dvReqSpinner").show(); }, delayms); }).ajaxStop(function() { // every time a request ends clearTimeout(spinnerTimeOut); // cancel timeout execution $("#dvReqSpinner").hide(); });

试一试。我无法测试它 - .-＆＃39;

Answer 2

要在单页应用中显示或隐藏加载指示器，我会在正文中添加和删除CSS类：

#dvReqSpinner {
    display: none;
}

body.loading #dvReqSpinner {
    display: block;
}

和

$("body").addClass("loading");
$("body").removeClass("loading");

主要是这会使JS代码独立于实际的页面布局，所以它“更好”但不是真正“少工作”。

要“自动”执行此操作，我建议将Ajax层抽象为辅助对象：

var API = {
    runningCalls: 0,
    // basic function that is responsible for all Ajax calls and housekeeping
    ajax: function (options) {
        var self = this;

        self.runningCalls++;
        $("body").addClass("loading");

        return $.ajax(options).always(function () {
            self.runningCalls--;
            if (self.runningCalls === 0) $("body").removeClass("loading");
        }).fail(function (jqXhr, status, error) {
            console.log(error);
        });
    },
    // generic GET to be used by more specialized functions
    get: function (url, params) {
        return this.ajax({
            method: 'GET',
            url: url,
            data: params
        });
    },
    // generic POST to be used by more specialized functions
    post: function (url, params) {
        return this.ajax({
            method: 'POST',
            url: url,
            data: params
        });
    },
    // generic POST JSON to be used by more specialized functions
    postJson: function (url, params) {
        return this.ajax({
            method: 'POST',
            url: url,
            data: JSON.stringify(params),
            dataType: 'json'
        });
    },
    // specialized function to return That Thing with a certain ID
    getThatThing: function (id) {
        return this.get("/api/thatThing", {id: id});
    }
    // and so on ...
};

以便稍后在您的应用程序代码中，您可以非常简单地调用它：

API.getThatThing(5).done(function (result) {
    // show result on your page
});

并确保显示微调器的低级别内容已被处理。

Answer 3

您可以使用全局ajax处理程序。

只要您发出ajax请求，就会执行此代码。你需要做的就是启用你的微调器。

$( document ).ajaxSend(function() {
  $("#dvReqSpinner").show();
});

一旦你的ajax请求成功，这段代码就会执行。你需要做的就是启用你的微调器。

$( document ).ajaxSuccess(function( event, request, settings ) {
   $("#dvReqSpinner").hide();
});

您还可以使用其他全局ajax函数来处理诸如ajax请求失败时使用＆＃34; .ajaxError（）＆＃34;

显示弹出窗口的内容

以下链接将包含所有其他功能的详细信息

https://api.jquery.com/category/ajax/global-ajax-event-handlers/

如何在不手动显示/隐藏网站的情况下将预加载器添加到网站

3 个答案: