Отображение изображения «загрузки» во время вызова AJAX

Question

У меня есть следующий вызов jQuery Ajax:

$.ajax({
                   type: "POST",
                   url: "addtobasket.php",
                   data: "sid=<?= $sid ?>&itemid=" + itemid + "&boxsize=" + boxsize + "&ext=" + extraval,
                   success: function(msg){
                     $.post("preorderbasket.php", { sid: "<?= $sid ?>", type: "pre" },
                     function(data){
                        $('.preorder').empty();
                         $('.preorder').append(data); 
                     }); 
                   }
                 });

Я хочу отобразить изображение, когда идет вызов ajax.Как я могу это сделать?

Спасибо,

Answer 1

попробуйте это:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#loading')
            .hide()
            .ajaxStart(function() {
                $(this).show();
            })
            .ajaxStop(function() {
                $(this).hide();
            });
    });
</script>

<div id="loading">
        Loading....
</div>

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

Answer 2

Что-то вроде этого (showLoadingImage и hideLoadingImage зависит от вас):

// show the loading image before calling ajax.
showLoadingImage();

$.ajax({
    // url, type, etc. go here
    success: function() {
        // handle success. this only fires if the call was successful.
    },
    error: function() {
        // handle error. this only fires if the call was unsuccessful.
    },
    complete: function() {
        // no matter the result, complete will fire, so it's a good place
        // to do the non-conditional stuff, like hiding a loading image.

        hideLoadingImage();
    }
});

Answer 3

Вы можете отобразить изображение непосредственно перед этим вызовом $ .ajax (), а затем скрыть / удалить изображение в функции пост-обработчика (как раз перед вызовами .empty () /. Append (data).