Javascript 如何在不手动显示/隐藏的情况下向网站添加预加载程序

在我的网站（MVC和WebAPI）上，我添加了一个预加载程序，以获得更好的用户体验

我在两点添加了预加载程序：

登录后，在用户之间进行身份验证并重定向到主页

在从服务器加载数据的每个页面中

我使用了一个图像，当页面/数据加载时显示，当数据完全加载时隐藏

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

---

每次我需要加载数据时（使用对web API的AJAX调用、对用户进行身份验证等——每一个需要时间的动作，我想向用户显示某些事情正在“发生”）都会显示和隐藏图像，这有点令人不安，难道没有任何“自动”吗在网站上安装预加载程序的选项？

我不知道是否是这样，但如果使用jquery ajax处理请求，可以执行以下操作：

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

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

});

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

编辑： 如果要避免显示快速请求的微调器，我认为这可以使其正常工作：

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


});

---

试试看。我无法测试-。-“

我不知道是否是这样，但如果使用jquery ajax处理请求，可以执行以下操作：

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

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

});

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

编辑： 如果要避免显示快速请求的微调器，我认为这可以使其正常工作：

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


});

---

试试看。我无法对其进行测试-。-“

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

#dvReqSpinner {
    display: none;
}

body.loading #dvReqSpinner {
    display: block;
}

及

这主要是使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 ...
};

因此，在以后的应用程序代码中，您可以像这样简单地调用它：

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

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

});

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

---

并确保已处理好显示微调器之类的低级内容。

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

#dvReqSpinner {
    display: none;
}

body.loading #dvReqSpinner {
    display: block;
}

及

这主要是使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 ...
};

因此，在以后的应用程序代码中，您可以像这样简单地调用它：

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

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

});

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

---

并确保诸如显示微调器之类的低级内容已经处理好。

您可以使用全局ajax处理程序来实现这一点

无论何时发出ajax请求，都将执行此代码。您在这里所要做的就是启用微调器

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

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

此代码将在ajax请求成功后执行。您在这里所要做的就是启用微调器

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

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

您还可以使用其他全局ajax函数来处理一些事情，例如在ajax请求失败时使用“.ajaxError（）”

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

---

您可以使用全局ajax处理程序进行此操作

无论何时发出ajax请求，都将执行此代码。您在这里所要做的就是启用微调器

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

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

此代码将在ajax请求成功后执行。您在这里所要做的就是启用微调器

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

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

您还可以使用其他全局ajax函数来处理一些事情，例如在ajax请求失败时使用“.ajaxError（）”

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

---

---

您是否在使用jquery？定义“每次需要加载数据时”-何时发生，触发数据的事件是什么？是什么代码？@Umamaheswaran是的，我正在使用jquery。@Tomalak请查看我编辑的问题，如果仍然不清楚，请告诉我。谢谢您正在使用jquery吗？定义“每次需要加载数据时”-何时发生，触发它的事件是什么？是什么代码？@Umamaheswaran是的，我正在使用jquery。@Tomalak请查看我编辑的问题，如果仍然不清楚，请告诉我。谢谢@最后，我不这么认为<代码>ajaxSend（）会在每次请求时触发。。因此，如果我们有一组同时发生的请求，它将为每个请求触发。相反，如果我们使用

ajaxStart（）

，它将在第一次请求时被调用，在最新的请求时被调用

ajaxStop（）

。@Ramon san，谢谢您的编辑！我没有注意到-。-“谢谢你的回答，我试过了，效果很好，但是如果数据加载时间不到3秒，是否可以避免预加载程序出现？问题是，即使数据立即加载，它也会出现。@user3378165，是的。在

ajaxStart（）

回调中使用3秒的超时，然后在

ajaxStop（）

中清除它。谢谢您的编辑，但它现在似乎正在工作，即使不到3秒，图像也会显示出来。@最后，我不这么认为<代码>ajaxSend（）会在每次请求时触发。。因此，如果我们有一组同时发生的请求，它将为每个请求触发。相反，如果我们使用

ajaxStart（）

，它将在第一次请求时被调用，在最新的请求时被调用

ajaxStop（）

。@Ramon san，谢谢您的编辑！我没有注意到-。-“谢谢你的回答，我试过了，效果很好，但是如果数据加载时间不到3秒，是否可以避免预加载程序出现？问题是，即使数据立即加载，它也会出现。@user3378165，是的。在

ajaxStart（）

回调中使用3秒的超时，然后在

ajaxStop（）

处将其清除。感谢您的编辑，但它似乎正在工作，即使不到3秒，图像也会显示。感谢您的回答，您能否解释助手将如何帮助我使用预加载程序？请阅读代码。它功能齐全。我甚至对所有内容都发表了评论，但是连接点是你的工作。谢谢你的回答，你能告诉我助手将如何帮助我使用预加载程序吗？阅读代码。它功能齐全。我甚至对每件事都发表了评论