Добавьте анимацию загрузки в jquery ajax.load()

Ответ 1

Сначала создайте div loading.

 <div id='loadingDiv'>
    Please wait...  <img src='path to your super fancy spinner' />
 </div> 

Сначала скройте этот DIV и прикрепите код, чтобы показать этот div, когда ajaxCall запускается и скрывается, когда завершается вызов ajax.

$('#loadingDiv').hide().ajaxStart( function() {
$(this).show();  // show Loading Div
} ).ajaxStop ( function(){
$(this).hide(); // hide loading div
});

Edit
Некоторая проблема в тегах форматирования SO некоторое время назад. Снова добавили их.

Ответ 2

Для этого вам нужно использовать gif-образ. Прежде всего измените html #window на gif-изображение до загрузки содержимого

Рабочий код

$('#window').html("<img src="image_url" />").load('http://mysite.com/mypage.php');

Ответ 3

Для асинхронных запросов, которые, как я знаю, могут потребоваться более нескольких миллисекунд, я использую Spin.js Он не имеет никаких внешних зависимостей и совместим с несколькими браузерами.

var opts = {
  lines: 13, // The number of lines to draw
  length: 10, // The length of each line
  width: 4, // The line thickness
  radius: 11, // The radius of the inner circle
  rotate: 0, // The rotation offset
  color: '#000', // #rgb or #rrggbb
  speed: 0.6, // Rounds per second
  trail: 32, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: 'auto', // Top position relative to parent in px
  left: 'auto' // Left position relative to parent in px
};

var target, spinner;

$(function(){
    target = $('#window').get(0);
    spinner = new Spinner(opts);
    spinner.spin(target);
    setTimeout(function(){
        spinner.stop();
        $(target).html("Loading finished.");
    }, 3500);
});

см. скрипт http://jsfiddle.net/y75Tp/73/ (обновление благодаря verbumSapienti)

Ответ 4

1) Перейдите в cssload.net и настройте счетчик с формой, цветами, скоростью и размером. Загрузите код.

2) Поместите код стиля в файл css

3) Поместите код div в ваш html файл, например:

<div id="loadingDiv">
        Please wait...
        <div id="spinnerDiv">
            <div id="blockG_1" class="facebook_blockG">
            </div>
            <div id="blockG_2" class="facebook_blockG">
            </div>
            <div id="blockG_3" class="facebook_blockG">
            </div>
        </div>
    </div>

where the #spinnerDiv is the actual div from cssload.

4) В js файле добавьте следующие строки jquery:

//*******************************
    // Loading div animation
    $(document).ajaxStart(function(){
          $("#loadingDiv").css("display","block");
        });
        $(document).ajaxComplete(function(){
          $("#loadingDiv").css("display","none");
        });

ajaxStart вызывается всякий раз, когда запускается вызов ajax; ajaxComplete вызывается, когда тот же самый вызов завершен.

5) Если вы не хотите видеть счетчик при первой загрузке страницы, обязательно добавьте в свой файл css следующее:

#loadingDiv{
display:none;
}

Ответ 5

Метод jQuery load() имеет обратный вызов, где вы можете получить статус xhr. Используя загрузчик spin.js(или любой другой индикатор нагрузки), вы можете показать, а затем скрыть, когда закончится .load(). Примечание: этот пример даст 404, так как загруженный файл не существует, но индикатор загрузки счетчика работает одинаково.

 // create gloabal page spinner for loading stuff
 var opts = {
   lines: 13, // The number of lines to draw,
   length: 12, // The length of each line
   width: 4, // The line thickness
   radius: 15, // The radius of the inner circle
   scale: .5, // Scales overall size of the spinner
   corners: 1, // Corner roundness (0..1)
   color: '#000', // #rgb or #rrggbb or array of colors
   opacity: 0.25, // Opacity of the lines
   rotate: 0, // The rotation offset
   direction: 1, // 1: clockwise, -1: counterclockwise
   speed: 1, // Rounds per second
   trail: 60, // Afterglow percentage
   fps: 20, // Frames per second when using setTimeout() as a fallback for CSS
   zIndex: 2e9, // The z-index (defaults to 2000000000)
   className: 'spinner', // The CSS class to assign to the spinner
   top: '50%', // Top position relative to parent
   left: '50%', // Left position relative to parent
   shadow: false, // Whether to render a shadow
   hwaccel: false, // Whether to use hardware acceleration
   position: 'absolute', // Element positioning
 }
 var spinner = new Spinner(opts).spin();
 var target = $("#loader").append(spinner.el);

 $("#result").load("ajax/test.html", function(response, status, xhr) {
   if (status == "error") {
     var msg = "Sorry but there was an error: ";
     $("#result").html(msg + xhr.status + " " + xhr.statusText);
   }
   // remove loader
   $("#loader").empty();
 });

<script src="http://fgnass.github.io/spin.js/spin.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loader">
</div>
<div id="result">
</div>