javascript - Ajax 中的加载指示器

Question

我知道这个问题在这个论坛上已经被问过很多次了。但它不适用于我正在寻找的东西。

我想在加载 ajax div 时显示一个加载指示器。有时加载需要几分钟时间，因此最好让用户知道正在加载。

根据我收集到的信息，它可以在 jquery 中完成。我还不太熟悉 jquery。使用此代码可以加载，但仅适用于第一页。

$(document).ready(function() { 
  $('body').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>'); 
});

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

我的页面结构是这样的

---

标题页

-Div (display ajax here)

-Another div within the first loaded page(Load another page through ajax here)

---

我需要它在加载时在第二个 div 中显示加载指示器。我假设 jquery "body"将它附加到主页正文一次并且不会再次运行，因为它在同一页面内。我确实尝试创建一个 div 而不是 body，在 jquery 中加载 div 但它不起作用。

任何帮助将不胜感激。

Answer 1

我发现将加载器 gif 添加到特定元素的最简单方法是创建一个将加载器作为背景的 CSS 类，而不是附加实际图像:

.ajax-loader {
    background: url(ajax-loader.gif) center center no-repeat;
}

然后您只需将该类添加到您正在加载的元素中，并在完成后将其删除:

    // Removes any loaded images on Ajax success
   var removeLoader = function(event, XMLHttpRequest, ajaxOptions)
    {
        $('.ajax-loader').removeClass('ajax-loader');
    };

    // Add the ajax loader to a specific element and remove it when successful
    $('.div1').addClass('ajax-loader').load('mypage.html', removeLoader);