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（此处显示ajax）

<块引用>

-第一个加载页面中的另一个div（此处通过ajax加载另一个页面）

---

我需要它在加载时在第二个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);

Answer 2

考虑到您要加载图像的 div 有一个 id="theDiv"

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

Answer 3

您通过 Javascript 附加“ajaxBusy”div 是否有原因？为什么不直接将 HTML 包含在页面本身中呢？

<div id="main">
  <div id="ajaxBusy">
    <p><img src="ajax-loader.gif"></p>
  </div>
</div>

尝试将 ajaxStart 和 ajaxStop 绑定到 ajaxBusy div 而不是文档。

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