如何在不手动的情况下将预加载器添加到网站 show/hide

Question

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

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

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

我用 show 加载 page/data 时 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();

每次我需要加载数据（使用 AJAX 调用网络 API、验证用户等时，一直显示和隐藏图像有点烦人。-每个动作这需要时间，我想向用户展示某些东西是 "happening")，没有任何 "automatic" 选项可以在网站上安装预加载器吗？

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();


});

试一试。我无法测试它-.-'

Answer 2

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

#dvReqSpinner {
    display: none;
}

body.loading #dvReqSpinner {
    display: block;
}

和

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

主要是这会使 JS 代码独立于实际的页面布局，所以它是 "nicer" 但不是真正的 "less work"。

要做到这一点 "automatically"，我建议将您的 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 函数来处理诸如使用 ".ajaxError()" 在 ajax 请求失败时显示弹出窗口之类的事情

下面link将详细介绍所有其他功能

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

如何在不手动的情况下将预加载器添加到网站 show/hide

How to add preloader to website without manually show/hide it

javascript

jquery

preloader