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

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

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

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

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