Аминированые ожидания ответа от сервера (jQuery)

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

<!DOCTYPE html>
<html>
<head>
  <="http://.jquery.com/jquery-latest.js"></script>
  <style>
   /*описание стилей*/
   #loadImg{position:absolute; z-index:1000; display:none}
  </style>
</head>
<body>

  <!-- содержимое страницы -->

  < id="loadImg" src="/load.gif" />
</body>
</html>

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

$.get("/ajaxtest.php", onAjaxSuccess); // - отправим запрос на сервер
startLoadingAnimation();  // - запустим анимацию загрузки

 onAjaxSuccess(data) // - функция завершения запроса
{
  stopLoadingAnimation();

  // дальнейшая работа с полученными от сервера данными
  ...
}

 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);
}
 stopLoadingAnimation() // - функция останавливающая анимацию
{
  $("#loadImg").hide();
}


Запись навигация

Top