jQuery прелоадер



preloader-picСегодня, мы рассмотрим, как можно сделать прелоадер. Прелоадер будет появляться, при отправке данных из формы. Для работы нам понадобятся: jQuery и собственно, сама картинка прелоадера. Картинку можно взять осюда — http://preloaders.net/.


Мне понравилась вот такая:

jquery preloader
Ок, картинку выбрали и даже не забыли, что нужно будет подключить jQuery. Теперь, можно приступать к созданию формы и кода, отвечающего за работу прелоадера. Форма будет простая, с 3 полями: Имя, Почта и Комментарии. Данные из формы будут передаваться в файл ajax.php.

Создаем файл index.php, с таким содержанием:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
		$('#submit').click(function() {
                //Добавляем нашу картинку в <div  id="container">
		$('#container').append('<img src="jquery-preloader.gif" alt=Загрузка..." id="loading" />');
 
			var name = $('#name').val();
			var email = $('#email').val();
			var comments = $('#comments').val();
 
                        //Передаем данные в файл ajax.php
			$.ajax({
				url: 'ajax.php',
				type: 'POST',
				data: 'name=' + name + '&email=' + email + '&comments=' + comments,
 
				success: function(result) {
				$('#response').remove();
				$('#container').append('<p id="response">' + result + '</p>');
				$('#loading').fadeOut(500, function() {
						$(this).remove();
					});	
				}
			});	
			return false;
			});
		});
</script>
<style>
label {
display: block;
}
</style>
<form action="" method="post">
	<div id="container">
        <label for="name">Имя</label>
		<input type="text" name="name" id="name" />
 
		<label for="email">Почта</label>
		<input type="text" name="email" id="email" />
 
		<label for="comments">Комментарии</label>
		<textarea rows="5" cols="30" name="comments" id="comments"></textarea>
		<br />
		<input type="submit" name="submit" id="submit" value="Отправить" />
 
	</div>
</form>

Давайте разберем более подробно некоторые моменты, относительно работы скрипта. После нажатия кнопки, мы добавляем нашу картинку в див с id=»container». После этого передаем данные в файл ajax.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
				url: 'ajax.php',
				type: 'POST',
				data: 'name=' + name + '&email=' + email + '&comments=' + comments,
 
				success: function(result) {
				$('#response').remove();
				$('#container').append('<p id="response">' + result + '</p>');
				$('#loading').fadeOut(500, function() {
						$(this).remove();
					});	
				}
			});

Ответ, из скрипта ajax.php, возвращается в параграф p c id=»response». После того, как получили данные, применяем к нашей картинке прелоадеру эффект fadeOut и удаляем её.

Создадим файл принимающий данные из формы. Содержимое файла ajax.php будет следующим:

1
2
3
4
5
<?php
//Добавляем/извлекаем данные из БД
//Выводим сообщение о том, что комментарий добавлен
echo "Комментарий добавлен";
?>

Думаю, с последним скриптом у вас не должно возникнуть осложнений. Скачать готовую версию можно здесь.



Теги: ,

Комментарии

  1. Да, популярная штука. Картинки для прелоадеров я всегда беру с ajaxload.info

    Reply

  2. Я тоже постоянно пользуюсь ей.
    Код пишу, в принципе, точно такой же как в этом примере.

    Reply

  3. Жаль валидации нет. Я всегда юзаю плагин jquery.from and jquery.validation

    Потрясно работает.

    Ну а если нет ЯС, то делаю все на серверной части.

    Reply

  4. не знаю как дела обстояли на 2010 год, но сейчас можно сделать всё гораздо проще

    $.ajax({

    beforeSend: function() { // показываем лоадер},

    complete: function() { // по окончании запроса прячем лоадер}

    })

    Reply

Оставить комментарий