Question

这page documents a wonderfully simple way to implement a global .ajaxStart and .ajaxStop。但正如其中一条评论所指出的那样，缺点是它依赖于一个模态窗口，大概放在页面上的绝对x / y上。

我希望通过将加载器div附加到我的Ajax调用的原点中来扩展提供的答案。我不想_替换我当前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-class

.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();
})

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

3 个答案: