ANTICHAT - Показать сообщение отдельно - [JavaScript, AJAX] Задай вопрос, получи ответ

Цитата:

Сообщение от ANTIJABBER

Как сделать подгрузочную имагу во время загрузки скрипта, средствами ajax

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

0. Скачиваем библиотеку jquery-1.2.6.pack.js

1. Определяем стиль надписи "Загрузка"

Код HTML:

<style type="text/css">
.main_load
{
	border: 1px #9A9993 dashed;
	font-size:24px;
	text-align:center;
	position:relative;
	top: 50%;
	left: 50%;
	margin-left:-100px;
	height:30px;
	width:200px;
}
</style>

2. Собственно подключаем либу, и создаём функцию для подзагрузки элементов в определённый DIV, которая будет доступна для выполнения при полной загрузке страницы...

Код HTML:

<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){	
	function getIdSet(div_x,type_x,date_x,url_x)
	{
		$.ajax({type: type_x,data: date_x,url: url_x,
			beforeSend: function()	{$(div_x).html("<div class=\"main_load\">Загрузка...</div>");},
			success: function(dt)	{$(div_x).html(dt);},
			error: function()	{$(div_x).html("<div class=\"main_load\">Ошибка... :( </div>");}
		});
	}
});
</script>

3. Применение: [в какой DIV будет происходить загрузка, метод передачи данных, значения, и куда отправлять запрос]

Код:

getIdSet('{DIV ID}','POST','val1=1&val2=2','loader.php')

4. Пример инклуда картинок (loader.php)

PHP код:


		
			
<?php

$_GET['image']=isset($_GET['image']) ? $_GET['image']:"";

$id='';

switch ($_GET['page'])

{

    case 'img1': $id='img/image.jpg'; break;

    case 'img2': $id='img/photo.png'; break;

    case 'img3': $id='img/picture.gif'; break; 

    default: $id='img/na.gif'; break; 

}

echo "<img src='{$id}'/>";

?>

p.s. возвращаемый от loader.php, в данном примере, должен быть чистый html