Question

我使用jQuery构建了一个使用异步Ajax调用的页面。我正在尝试显示一个加载GIF，但对于我的生活，我无法让它工作。 gif永远不会显示。有什么想法吗？

function updateCityList(state) {
        $("#city-loading").empty().html('<img src="/Images/loading.gif" />');
        $.ajax(
            {
                type: "GET",
                async: true,
                url: "/NPA/GetCities/" + state,
                dataType: "json",
                success: function(optionData) {
                    var options = [];
                    $(optionData).each(function(index, optionData) {
                        if ($('#cities option[value=' + optionData.Value + ']').length == 0)
                            options.push(optionData);
                    });
                    $("#cityList").fillSelect(options);
                }
            });
        $("#city-loading").empty();
    };

Answer 1

您对$.ajax()的呼叫会引发请求，然后立即继续，因为您正在异步进行呼叫。因此，$("#city-loading").empty();的呼叫立即发生。

您需要将$("#city-loading").empty();移动到success:函数的末尾，以便在AJAX请求完成之前不会调用它。

Answer 2

先打电话给你：

$("#city-loading").empty().html('<img src="/Images/loading.gif" />');

然后是ajax调用，因为它是异步代码执行将继续执行：

$("#city-loading").empty();

你应该在ajax回调中隐藏图像：

function updateCityList(state) {
    $("#city-loading").empty().html('<img src="/Images/loading.gif" />');
    $.ajax(
        {
            type: "GET",
            async: true,
            url: "/NPA/GetCities/" + state,
            dataType: "json",
            success: function(optionData) {
                $("#city-loading").empty();
                var options = [];
                $(optionData).each(function(index, optionData) {
                    if ($('#cities option[value=' + optionData.Value + ']').length == 0)
                        options.push(optionData);
                });
                $("#cityList").fillSelect(options);
            }
        });
};

Answer 3

我将提供无代码的解释。您正在动态地向DOM添加HTML（img src）。 DOM具有独立于Javascript执行的自然延迟。这意味着首先进行ajax调用，然后应用程序从服务器下载图像。

您最好的解决方案是将图像添加到页面中。确认图像已加载到DOM中。（向图像对象添加id，然后使用查询确认您可以访问它）。然后进行你的ajax通话。

另一种选择可能是预加载图像，因此无需下载服务器。

JavaScript加载图像在进行ajax调用时冻结

3 个答案: