jQuery Ajax加载图像未在Ajax调用上加载

问题描述

我将下面的jQuery代码段用于在许多站点上使用的ajax加载图像，由于某种原因，当ajax请求被触发时，它不会显示加载图像.

I'm using the below jQuery snippet for an ajax loading image which I use on numerous sites, for some reason it wont disply the loading image when an ajax request is fired.

jQuery:

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

Ajax调用示例(按预期方式工作并返回正确的数据):

Example Ajax call (working as expected and returning correct data):

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

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

The HTML code is being affected by the jQuery as display: none is being added on page load, there are no errors and if I change display: block on the HTML via firebug the loading.gif image shows up.

任何帮助都将不胜感激.

Any help greatly appreciated.

推荐答案

您可以使用beforeSend和complete方法进行创建:

you can make it with beforeSend and complete methods:

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

这篇关于jQuery Ajax加载图像未在Ajax调用上加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！