Индикатор загрузки в Ajax

Question

Я знаю, что на этом форуме много раз спрашивали и отвечали.Но это не работает в том, что я ищу.

Я хочу отобразить индикатор загрузки во время загрузки ajax div.Есть случаи, когда загрузка занимает несколько минут, поэтому было бы хорошо сообщить пользователю, что он загружается.

Из того, что я понял, это можно сделать в jquery.Я еще не слишком знаком с jquery.С этим кодом загрузка работает, но только для первой страницы.

$(document).ready(function() { 
  $('body').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>'); 
});

$(document).ajaxStart(function(){ 
  $('#ajaxBusy').show(); 
}).ajaxStop(function(){ 
  $('#ajaxBusy').hide();
});

Моя страница структурирована так

---

Заголовок страницы

-Div(здесь отображается ajax)

-Другой div внутри первой загруженной страницы (здесь можно загрузить другую страницу через ajax)

---

Мне нужно, чтобы он отображалсяиндикатор загрузки во втором диве во время загрузки.Я предполагаю, что jquery «тело» добавляет его к основному телу страницы один раз и не запускается снова, поскольку он находится на той же странице.Я попытался создать div и вместо body загрузить div в jquery, но он не работает.

Любая помощь будет принята с благодарностью.

Answer 1

Я обнаружил, что самый простой способ добавить gif-загрузчик к определенным элементам - создать CSS-класс с загрузчиком в качестве фона вместо добавления фактического изображения:

.ajax-loader {
    background: url(ajax-loader.gif) center center no-repeat;
}

Затем вы просто добавляете этот класс к загружаемому элементу и удаляете его по завершении:

    // Removes any loaded images on Ajax success
   var removeLoader = function(event, XMLHttpRequest, ajaxOptions)
    {
        $('.ajax-loader').removeClass('ajax-loader');
    };

    // Add the ajax loader to a specific element and remove it when successful
    $('.div1').addClass('ajax-loader').load('mypage.html', removeLoader);

Answer 2

Есть ли причина, по которой вы добавляете свой div "ajaxBusy" через Javascript? Почему бы просто не включить HTML на самой странице?

<div id="main">
  <div id="ajaxBusy">
    <p><img src="ajax-loader.gif"></p>
  </div>
</div>

Попробуйте связать ajaxStart и ajaxStop с div ajaxBusy вместо документа.

$('#ajaxBusy').ajaxStart(function(){ 
  $(this).show(); 
}).ajaxStop(function(){ 
  $(this).hide();
});

Answer 3

, учитывая, что у div, который вы хотите загрузить, есть id = "theDiv"

$(document).ready(function() { 
  $('#theDiv').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>'); 
});