Анимирование ожидания ответа от сервера

Материал из JQuery

Перейти к: навигация, поиск

Если во время работы страницы необходимо сделать запрос на сервер, который может занять продолжительное время (больше секунды), хорошим тоном будет предупредить пользователя об ожидании загрузки. Стандартным средством для этого является анимация ожидания (разные варианты таких gif-анимаций можно найти на http://www.ajaxload.info). После того, как вы подберете подходящую анимацию и загрузите ее (допустим под именем load.gif) на сервер с вашим сайтом, можно будет использовать ее при выполнении ajax-запросов. Для этого, разместим в конце страницы изображение с анимацией загрузки и сделаем его невидимых в стилях (css):

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
   /*описание стилей*/
   #loadImg{position:absolute; z-index:1000; display:none}
  </style>
</head>
<body>
 
  <!-- содержимое страницы -->
 
  <img id="loadImg" src="img/load.gif" />
</body>
</html>

При старте ajax-запроса покажем изображение с анимацией загрузки в центре страницы, а при получении ответа от сервера скроем эту анимацию:

$.get("/ajaxtest.php", onAjaxSuccess); // - отправим запрос на сервер
startLoadingAnimation();  // - запустим анимацию загрузки
 
function onAjaxSuccess(data) // - функция завершения запроса
{
  stopLoadingAnimation();
 
  // дальнейшая работа с полученными от сервера данными
  ...
}
 
function startLoadingAnimation() // - функция запуска анимации
{
  // найдем элемент с изображением загрузки и уберем невидимость:
  var imgObj = $("#loadImg");
  imgObj.show();
 
  // вычислим в какие координаты нужно поместить изображение загрузки,
  // чтобы оно оказалось в серидине страницы:
  var centerY = $(window).scrollTop() + ($(window).height() + imgObj.height())/2;
  var centerX = $(window).scrollLeft() + ($(window).width() + imgObj.width())/2;
 
  // поменяем координаты изображения на нужные:
  imgObj.offset(top:centerY, left:centerX);
}
 
function stopLoadingAnimation() // - функция останавливающая анимацию
{
  $("#loadImg").hide();
}

Используемые методы jQuery