Загрузка изображения 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. (добавьте идентификатор к объекту изображения, а затем используйте запрос, чтобы подтвердить, что вы можете получить к нему доступ). Тогда сделайте ваш Ajax-вызов.

Другим вариантом может быть предварительная загрузка изображения, поэтому загрузка с сервера не требуется.