Как я могу создать & ldquo; Пожалуйста, подождите, загрузка & hellip; & rdquo; анимация с использованием jQuery?

Что касается фактической загрузки изображения, посетите этот сайт для получения множества вариантов.

Что касается отображения DIV с этим изображением в начале запроса, у вас есть несколько вариантов:

A) Вручную показать и скрыть изображение:

$('#form').submit(function() {
    $('#wait').show();
    $.post('/whatever.php', function() {
        $('#wait').hide();
    });
    return false;
});

B) Использовать ajaxStart и ajaxComplete :

$('#wait').ajaxStart(function() {
    $(this).show();
}).ajaxComplete(function() {
    $(this).hide();
});

При использовании этого элемента будет отображаться / скрываться для любой запрос . Может быть хорошим или плохим, в зависимости от необходимости.

C) Использовать отдельные обратные вызовы для конкретного запроса:

$('#form').submit(function() {
    $.ajax({
        url: '/whatever.php',
        beforeSend: function() { $('#wait').show(); },
        complete: function() { $('#wait').hide(); }
    });
    return false;
});

Это заставит кнопки исчезнуть, тогда на их месте появится анимация «загрузки» и, наконец, просто отобразит сообщение об успехе.

$(function(){
    $('#submit').click(function(){
        $('#submit').hide();
        $("#form .buttons").append('<img src="assets/img/loading.gif" alt="Loading..." id="loading" />');
        $.post("sendmail.php",
                {emailFrom: nameVal, subject: subjectVal, message: messageVal},
                function(data){
                    jQuery("#form").slideUp("normal", function() {                 
                        $("#form").before('<h1>Success</h1><p>Your email was sent.</p>');
                    });
                }
        );
    });
});

Вы можете взять анимированный GIF вращающегося круга из Ajaxload - вставьте это где-нибудь в герархию файла вашего сайта. Затем вам просто нужно добавить HTML элемент с правильным кодом и удалить его, когда вы закончите. Это довольно просто:

function showLoadingImage() {
    $('#yourParentElement').append('<div id="loading-image"><img src="path/to/loading.gif" alt="Loading..." /></div>');
}

function hideLoadingImage() {
    $('#loading-image').remove();
}

Тогда вам просто нужно использовать эти методы в вашем AJAX вызове:

$.load(
     'http://example.com/myurl',
     { 'random': 'data': 1: 2, 'dwarfs': 7},
     function (responseText, textStatus, XMLHttpRequest) {
         hideLoadingImage();
     }
);

// this will be run immediately after the AJAX call has been made,
// not when it completes.
showLoadingImage();

Это имеет несколько предостережений: во-первых, если у вас есть два или более места, где может быть показана загрузочная картинка, вам нужно будет как-то отследить, сколько вызовов выполняется одновременно, и только потом скрыть, когда все они будут завершены. Это можно сделать с помощью простого счетчика, который должен работать практически во всех случаях.

Во-вторых, это будет только скрывать загрузочное изображение при успешном вызове AJAX. Для обработки состояний ошибок нужно посмотреть $.ajax, что сложнее, чем $.load, $.get и т.п., но и гораздо гибче.

Наряду с тем, что предложили Джонатан и Самир (оба отличных ответа btw!), у jQuery есть несколько встроенных событий, которые он будет увольнять за вас, когда сделает запрос на аякс.

Есть ajaxStart event

Show a load message whenever anJAX request starts (and none is already active).

...и это брат, событие ajaxStop event

Attach a function to be executed whenever all AJAX requests has ended. Это событие Ajax.

вместе, они делают прекрасный способ показать сообщение о прогрессе, когда какая-либо активность ajax происходит где-либо на странице.

HTML:

<div id="loading">
  <p><img src="loading.gif" /> Please Wait</p>
</div>

Script:

$(document).ajaxStart(function(){
    $('#loading').show();
 }).ajaxStop(function(){
    $('#loading').hide();
 });

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

Например, создайте следующий div:

<div id="spinner">
  <img src="images/spinner.gif" alt="Loading" />
</div>

Установите его на отображение: none в ваших таблицах стилей. Вы можете стилизовать его любым удобным для вас способом. Вы можете сгенерировать красивую загрузочную картинку на Ajaxload.info, если хотите.

Затем, вы можете использовать нечто подобное, чтобы она автоматически отображалась при отправке Ajax-запросов:

$(document).ready(function () {

    $('#spinner').bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxComplete", function() {
        $(this).hide();
    });

});

Просто добавьте этот Javascript-блок в конец вашей страницы перед закрытием тэга тела или где угодно.

Теперь, всякий раз, когда вы посылаете Ajax-запросы, будет показываться div #spinner. Когда запрос будет завершен, он снова будет скрыт.