Question

我目前正在使用预编程器gif为我的ajax调用使用此代码：

$(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调用？或者有没有办法将多个ajaxStart链接到特定元素？

解

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

Answer 1

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

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

来自jQuery docs的例外：

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

如何根据不同的ajax调用显示不同的preloader gif？

1 个答案: