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 请求完成之前不会被调用。