Question

我从API获取一些数据并且数据很大。我通过AJAX调用获取此数据。

我的问题是我想显示一个加载器图像，直到获取所有数据。在我的AJAX成功函数中，我隐藏了我的加载器图像。

这不能解决我的问题：图像被隐藏但数据仍在被提取。

我在谷歌搜索并找到.ajaxStart()和.ajaxStop()，但.ajaxStart()没有更多关于如何在其中使用AJAX的信息。

$(document).ajaxStart(function(){
  $.ajax(); // my ajax call
});

$(document).ajaxStart(function(){
    image.hide(); // hide my image
 });

但这不能解决我的问题。有人能告诉我它是怎么做的吗？

Answer 1

单独编写$.ajax();并将以下内容保留为全局。

$(document).ajaxStart(function() {
    $('img').show();
}).ajaxStop(function() {
    $('img').hide();
});

如果您发现任何困难，请尝试在 callbacks 中执行此操作。

$.ajax({
   // you ajax attributes 
   beforeSend: function(){
     $("img").show();
   },   
   success: function(data) {
     //handle the data that is being fetched
     $("img").hide();
   },
   error: function(error) {
     //handle the error
     $("img").hide();
   }
 });

Answer 2

如果我正确理解了问题，那么您可能不清楚$.ajaxStart()和$.ajaxStop()的用途。

如果要在处理单个 Ajax调用时显示加载程序映像，可以执行以下操作：

$('#loader').show();  // assuming the loader is e.g. <div id="loader">loading</div>

$.ajax( ... )         // your ajax call
    .done( function() {
        // when it's finished hide the loader
        $('#loader').hide();
    });

如果要显示每个 Ajax调用的加载器，请使用$.ajaxStart()和$.ajaxStop()：

$( document ).ajaxStart( function() {
    $('#loader').show();
}).ajaxStop( function() {
    $('#loader').hide();
});

在.ajaxStart（）中使用$ .ajax

2 个答案: