«загрузка изображения» между началом и концом ajax-запроса

Question

Я хочу добавить изображение загрузки, которое будет видно между началом и концом запроса ajax в jquery.

В настоящее время, когда нажимается кнопка, которую я хочу заменить загрузочным изображением, эта функция вызывается:

function test(num)
{
             $("div.bd_img").attr("style", "display:none");
             $("div.ajax_load").attr("style", "display:block");
             str = "ajax?id=" + num.toString();

             $.ajax({
                type: "GET",
                url: str,
                dataType: "xml",
                success: test2
             });
             $("div.bd_img").attr("style", "display:block");
             $("div.ajax_load").attr("style", "display:none");

}

Но, похоже, он не работает.

Два деления bd_img и ajax_load являются дочерними по отношению к div, поэтому одно должно быть заменено другим, когда для display установлено значение none, и наоборот.

Answer 1

Отключить загрузчик в функции обратного вызова (test2 в вашем случае)

Ajax вызовы по определению являются асинхронными.Ваш текущий код сработает с AJAX GET, а затем продолжит, чтобы отключить ваш загрузчик.Если вы отключите загрузчик в обратном вызове из вызова ajax, вы должны увидеть ожидаемое поведение.

Answer 2

проверьте ваш метод test2.Я также переместил бы ваш переключатель изображений в ваш обратный вызов успеха.

success: function() {
    $("div.bd_img").show();
    $("div.ajax_load").hide();

    test2();
}

проверьте, чтобы убедиться, что ваш div действительно имеет класс bd_img и ajax_load, и этот класс отсутствует на реальном изображении.сейчас вы говорите, что у вашего div есть класс .bd_img или .ajax_load.если это изображение внутри div с классом, то вы хотите ...

$("div .bd_img").show();
$("div .ajax_load").hide();

Answer 3

Я бы использовал ajaxStart и ajaxStop Это позволит работать всем вашим приложениям, хранить код в одном месте, легко изменять и т. Д.

Answer 4

Вы должны переключить обратно изображения внутри test2. Ajax вызывает область асинхронно, поэтому $.ajax(...) возвращается немедленно, а не после завершения запроса.

Когда-нибудь задумывались, что означает A ajax? : -)