JQuery AJAX загрузки GIF

Question

Как добавить загрузочный gif во время обработки jQuery AJAX?Я прочитал некоторые учебники, они используют beforeSend.но до сих пор не вижу вещи загрузки.

<script src="jquery-1.6.1.min.js"></script>
<script>
$.ajax({
url: "index_2.php", 
dataType: "html",
type: 'POST', 
data: "value=something",
beforeSend: function () {
    $("#result").html('<img src="loding.gif" /> Now loding...');
},
success: function(data){ 
  $("#result").html(data); //even add .delay(5000)
}
});
</script>
<div id="result"></div>

index_2.php

<?php
sleep(5);
echo $_POST['value'];
?> 

Я установил sleep(5); в index_2.php, он должен показывать londing.gif в div#result в течение 5 секунд, пока данныевозврат от index_2.php.

Answer 1

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

$("#result").html('<img src="loding.gif" /> Now loding...');

затем при успешном связывании данных

Answer 2

есть несколько способов.Мой предпочтительный способ - присоединить функцию к событиям ajaxStart / Stop на самом элементе.

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

Функции ajaxStart / Stop будут срабатывать всякий раз, когда вы делаете какие-либо вызовы ajax.

Answer 3

Посмотрите на функцию $.ajaxStart(), которая будет выполняться всякий раз, когда любой Ajax-запрос запускается (очевидно).

Проверьте этот вопрос для получения подробной информации.