Индикатор загрузки данных из базы
 

Добрый день!
Такой вопрос: есть php-скрипт, который загружает обычным select-ом из базы mysql некие данные и выводит в html-табличку. Записей может быть несколько тысяч, и весь процесс занимает несколько секунд, в течение которых пользователь наблюдает только загруженный header страницы.
Возможно ли сделать при помощи jQuery индикатор (и если да, то как?:) ), который бы отображался на время загрузки данных из базы, не обязательно прогресс-бар, можно просто анимашку. Или для этого надо, чтобы данные из базы тоже грузились при помощи jQuery (Ajax)?

php так не может. если отдаст данные, значит все

ставьте пустышку. будет выглядеть, будто прогресс идет)

Ну это не проблема, проблема в другом - как определять, когда данные загружены и "пустышку" нужно убирать? Ставить фиксированное время как-то некрасиво.

делайте через AJAX, тогда узнаете, когда придут данные и когда надо убирать пустышку

Это вариант, но слишком много придется переделывать. А что, если сделать так: изначально выводить данные в скрытый div, например, а когда все загружено, показывать div и прятать пустышку? Только я не знаю, как определять момент окончания загрузки? Использовать событие onLoad дива?

делайте как VK : когда запрос начался (данные только посланы), покажите красивую гифку, мол система загружает (хехе) А потом,как данные придут, это дело скрываете.

о господи. не знаете событие AJAX?

вы на чем пишите? нативный JS, или на JQuery, или другом фреймворке?

Пишу на РНР, при необходимости использую jQuery, но только готовые решения. Максимум могу немного адаптировать под свои нужды. Но написать что-то свое на JS или jQuery - увы...:(
Поэтому буду благодарен за пример практической реализации вышеописанного:)

не люблю jquery.

// надеюсь, вы элементы получать умеете :)
var GIF = $('.....');

$.ajax({
        //поставьте false, если не надо кеширование, в противном случае уберите эту строчку
        cache : true,

        // данные,которые будут идти. если не отправляются, уберите эту строчку
        data : { a : 'b', login : 'admin1234', password : 'фысивйвц845ч3' },

        // перед отправкой показываем анимацию
        beforeSend : function(xml){ GIF.show() },
        // в любом случае скрывает анимацию
        complete : function(){ GIF.hide() },
        // обрабатывать ошибки надо. потом не понять, где загвоздка, когда что-нибудь сломатеся
        error : function( xml, status, err ){  alert( 'ошибка' )  },
        // выводим то,что пришло
        success : function(data){  alert('Пришло : \n' + data)  },

        // время жизни запроса. на всякий.
        timeout : 15 * 1000,

        // URL запроса
        url : ""

        })

var GIF = $('#div_id'); - сюда, как я понимаю, ставим id какого-нибудь дива с анимашкой, так?

data : { a : 'b', login : 'admin1234', password : 'фысивйвц845ч3' }, - вот это не понимаю...
И как это привязывается к конкретному процессу выборки данных из базы, тоже не понимаю.:(

На всякий случай, вот файл, который производит выборку:

<?php
// No direct access.
defined('_GB') or die;
$query = "SELECT id, num, abonent, prim FROM tel_int";
$result = mysql_query($query);

////////////////////// вывод в таблицу \\\\\\\\\\\\\\\\\\\\\\\\\\\\\

	echo "<br /><table class='usertable'><thead><tr class='odd'><th>&nbsp;</th><th>Абонент</th><th>№ тел.</th><th>Примечание</th></tr>";
		while($row = mysql_fetch_array($result)) {
			echo "<tr><td>" . $row['id'] . "</td><td>" . $row['abonent'] . "</td><td>" . $row['num'] . "</td><td>" . $row['prim'] . "</td></tr>";
		}	
	echo "</thead></table>"		
?>

Этот файл инклюдится в файл index.php, который представляет разметку страницы (шаблон).

ну раз просто берутся данные из базы,тогда лучше так

// надеюсь, вы элементы получать умеете :)
var GIF = $('#div_id');

$.ajax({

        // перед отправкой показываем анимацию
        beforeSend : function(xml){ GIF.show() },
        // в любом случае скрывает анимацию
        complete : function(){ GIF.hide() },
        // обрабатывать ошибки надо. потом не понять, где загвоздка, когда что-нибудь сломатеся
        error : function( xml, status, err ){  alert( 'ошибка' )  },
        // выводим то,что пришло
        success : function(data){  alert('Пришло : \n' + data)  },

        // URL запроса
        url : "http://google.ru"

        })

ну как-бы alert мне совсем не нужно...:)
И вообще я логику не понимаю - когда срабатывает beforeSend? А когда complete?
Иначе говоря, не понимаю, как связать приведенный Вами код и мой скрипт...

это уже надо хоть немного шарить в этом :)

можете написать в раздел "работа". будет скрипт и незамороченная голова

кстати, пробовал использовать вот такое решение:

<script type="text/javascript">
$(document).ready(function(){
  $.blockUI({message:'Немного подождите,идет построение страницы...<br><img src="http://szenprogs.ru/img/sys/wait.gif" border="0" width="48" height="48" alt=""><br><a href="javascript://" onclick="$.unblockUI();return false;" style="font-size:7pt;">Разблокировать<\/a>',css:{background:'#fff',border:'5px solid #e0e0e0',padding:'3px'},overlayCSS:{background:'#000',opacity:.9}});
  $(window).load(function(){
    _uWnd.close('codeAlert');
    $.unblockUI();
  });
});
</script>

Но скрипт работал наполовину - выводил индикатор, но после загрузки страницы не прятал его, закрыть можно было только вручную, нажав на Разблокировать

Здесь все написано, что и когда срабатывает
http://api.jquery.com/jQuery.ajax/