在当前 div 中插入全局 ajax 微调器

Question

本页记录了一种非常简单的实现全局.ajaxStart and .ajaxStop的方法。但正如其中一条评论指出的那样，缺点是它依赖于一个模态窗口，该窗口可能放置在页面上的绝对 x/y。

我希望通过将加载程序div 附加到我的 Ajax 调用的来源的任何div 来扩展那里提供的答案。我不想_replacing我当前div 的 HTML - 我不想将 HTML 附加到它 - 我想将该加载器div 合并到我当前的div 中。

我已经用".append"和".html"进行了几次运行，但我不清楚如何产生给定的效果 - 特别是考虑到对Update: As of jQuery 1.8,的引用

谢谢

Answer 1

这是你要找的吗？

function addLoadingDiv(ctrl) {
    //uncomment for mask
    /*ctrl.append('<div class="exposeMask" style="width: ' + ctrl.width() + '; height: ' + ctrl.height() + '; opacity = .5;"></div>');*/
    var left = ((ctrl.width() / 2) - 50) + 'px';
    var top = ((ctrl.height() / 2) - 25) + 'px';
    loadingDiv = '<div class="ajaxLoading" style="top: ' + top + '; left: ' + left + ';">Loading...</div>';
    ctrl.addClass('loading');
    ctrl.append(loadingDiv);
}

这里的代码太多 - 试试这个链接：http://jsfiddle.net/4Ety8/

谢谢JF

Answer 2

我是这样处理这个问题的：

添加 css 类

.loader { background: url(/images/loader.gif) no-repeat 50% 50% !important;
          width: 32px;
          height: 32px;
          position: fixed;
          top: 50%;
          left: 50%;
          z-index: 300; }

然后使用 jQuery 添加和删除你的类取决于 Ajax-Status

// start ajax
$("yourdiv").addClass("loader");
// success callback
$("yourdiv").removeClass("loader");

所以没有必要附加额外的html...祝你好运

Answer 3

试试这个

$(document).ajaxStart(function(){
    $("#yourdiv").show();
})