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

我发现将loader 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();
});

在Ajax中加载指标

3 个答案: