Загрузка gif "зависает" во время выполнения кода

Question

Я добавляю анимированный GIF, который является полосой загрузки.GIF определен ранее в коде, и тогда я просто делаю следующее ..

document.getElementById("loading").style.display = "inline";
//some if statements.
do_ajax(params);

Вызов ajax выглядит примерно так ...

    var uri = getURL(params);
    var xhr = new XMLHttpRequest();
    xhr.open("POST",uri,false);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
    xhr.send(null);

, чтобы показать загрузочный GIF.Затем я выполняю некоторые проверки (операторы if) с последующим запросом AJAX.Тем не менее, gif останавливается во время выполнения всего этого кода и начинает «двигаться» только после завершения выполнения кода.Почему это?Как я могу решить эту проблему?

Я использую Chrome 11

Answer 1

Думаю, просто убедитесь, что вы используете async: true

    $("#wait").show(); //SHOW WAIT IMG

     $.ajax({
        url: 'process.php',  //server script to process data
        type: 'POST',
        async: true, // <<<<< MAKE SURE IT'S TRUE
        data: { data1: "y", data2: "m", data3: "x" },
        complete: function() {
            $("#wait").hide();
        },        

        success: function(result) {
            //do something
        }
    });

Answer 2

Вы используете синхронный XHR.Это заблокирует браузер во время ожидания завершения запроса.Очевидно, это вызывает серьезную проблему пользовательского интерфейса.

Попробуйте асинхронный.Установите третий параметр open() на true.Вам также нужно назначить событие readystatechange и прослушать его.

Дальнейшее чтение .

Answer 3

Ожидаете ли вы увидеть loading.gif во время выполнения синхронного запроса ajax?

Синхронные запросы ajax полностью блокируют пользовательский интерфейс большинства браузеров, предотвращая отображение любых внесенных вами изменений до тех пор, пока запрос не будет завершен.

Если вы хотите видеть loading.gif во время выполнения запроса, сделайте его асинхронным:

//--- js code

document.getElementById("loading").style.display = "inline";

//--- js code

var uri = getURL(params);
xmlhttp.open("POST", uri, true);
xmlhttp.onreadystatechange = handleReadyStateChange;
xmlhttp.send(null);
function handleReadyStateChange() {
    if (xmlhttp.readyState == 4) {
        // Request Complete
    }
}