Question

我正在使用下面的jQuery代码段来获取我在许多网站上使用的ajax加载图片，出于某种原因，当ajax请求被触发时它不会显示加载图像。

jQuery的：

$(".loading").hide().ajaxStart(function() {
    $(this).show();
}).ajaxStop(function() {
    $(this).hide();
});

示例Ajax调用（按预期工作并返回正确的数据）：

$('#list').change(function() {
    var vCID = 1;

    if ($.trim(vCID) && vCID != 0)
    {
        var vData = {aid:1001,id:vCID};

        $.ajax(
        {
            url : "ajax.php",
            type: "POST",
            data : vData,
            success: function(data, textStatus, jqXHR)
            {
                $('#itemList').html(data);
            }
        });
    }
});

HTML：

<div class="loading">&nbsp;</div>

CSS：

.loading {
    width: 40px;
    height: 40px;
    margin: 10px auto 0 auto;
    background: url('images/loading.gif') no-repeat;
}

HTML代码受jQuery的影响，因为在页面加载时添加了display: none，没有错误，如果我通过firebug在HTML上更改display: block，则loading.gif图像显示

非常感谢任何帮助。

Answer 1

您可以使用beforeSend和complete方法进行制作：

     $.ajax({
        url: "ajax.php",
        type: "POST",
        data: vData,
        beforeSend: function () {
            $(".loading").show();  // <----show before sending
        },
        success: function (data, textStatus, jqXHR) {
            $('#itemList').html(data);
        },
        complete: function () {
            $(".loading").hide(); // on complete of ajax hide it.
        }
    });

Answer 2

也许尝试将其更改为

$(".loading").hide();

$(document).ajaxStart(function() {
    $(".loading").show();
}).ajaxStop(function() {
    $(".loading").hide();
});

而不是将其链接到可能无法触发$('.loading')事件的ajaxStart()。

jQuery Ajax加载图像没有在ajax调用上加载

2 个答案: