0

我目前正在使用以下代码为我的 ajax 调用使用预加载器 gif：

$(document).ajaxStart(function () {
    var position = $('#parentDiv').position();
    position.left += (($('#parentDiv').width() / 2) - ($('#bigPreloader').width() / 2));
    position.top += (($('#parentDiv').height() / 2) - ($('#bigPreloader').height() / 2));
    $('#bigPreloader').css(position).show();
    $('#bigPreloader').show();
}).ajaxStop(function () {
    $('#bigPreloader').hide();
});

在上面的代码中，#parentDiv 占据了页面的大部分，并且预加载器是 250x250 像素并以 #parentDiv 为中心。

这很好用，但我刚刚添加了一些与特定输入相关联的额外 ajax 调用，而不是整个页面。我有一个小型预加载器（14x14 像素），我计划将其放入适当的输入本身。

ajaxStart 内部有没有办法确定进行了哪个 ajax 调用？或者有没有办法让多个 ajaxStarts 链接到特定元素？

解决方案

$(document).ajaxSend(function (event, jqxhr, settings) {
    if (settings.url.indexOf('LoadInputData') == -1) {
        var position = $('#parentDiv').position();
        position.left += (($('#parentDiv').width() / 2) - ($('#bigPreloader').width() / 2));
        position.top += (($('#parentDiv').height() / 2) - ($('#bigPreloader').height() / 2));
        $('#bigPreloader').css(position).show();
        $('#bigPreloader').show();
    } else {
        $('#inputLoad').removeClass('notActive').addClass('isActive');
    }
}).ajaxStop(function () {
    if ($('#bigPreloader').is(':visible')) {
        $('#bigPreloader').hide();
    } else {
        $('#inputLoad').removeClass('isActive').addClass('notActive');
    }
});
4

1 回答 1

0

.ajaxStart() 只有在所有其他调用都完成后才会触发。如果没有正在进行的请求，它将触发 ajaxStart 中的代码。因此，如果您使用的是异步请求，则此方法不会有太大帮助，除非所有先前的请求都已完成运行。

为了解决您的问题，我建议改用.ajaxSend()方法。此方法每次都会触发，就在即将发出请求之前。所以它的作用与 .ajaxStart() 几乎相同。要区分请求，您可以使用传递给处理函数的参数。您可以测试几件事，但可能最简单的是只使用 URL，如下所示：

来自 jQuery 文档的示例：

$(document).ajaxSend(function(event, jqxhr, settings) {
    if ( settings.url == "ajax/test.html" ) { //Test by URL
        //Do your specific pre-loader stuff here
    }
});

您还可以在特定请求中设置上下文。这样做会将$(this)选择器设置为您指定的上下文，因此您也可以将逻辑与 DOM 分开。通过这种方式，您可以使用设置了加载器的单个函数，该函数会发布在您在上下文中设置的元素上。

$.ajax({
    url: "test.html",
    context: document.body
}).done(function() {
    $(this).addClass("done"); //$(this) is the document.body or could be the element you want to put your specific loader in.
});
于 2013-02-21T15:33:28.700 回答