Rails / Jquery: при загрузке страницы как видеть вращающееся колесо?

Question

Привет, ребята. Я новичок в jquery, и я просто настроил загрузку AJAX-страниц в своем приложении rails.До сих пор у меня есть меню, которое загружает различные запросы внутри контейнера div с использованием AJAX.Однако, когда я нажимаю на ссылку, чтобы загрузить новую страницу внутри div, возникает задержка, когда я все еще смотрю на старую страницу, прежде чем загружается новая.

Я видел в других местах, где люди используютАнимация вращающегося колеса для обозначения загрузки, вот пример сайта, который делает это, когда вы нажимаете ссылки «показать заметки», «комментарии» или «похожие эпизоды» http://railscasts.com/episodes/164-cron-in-ruby-revised

Спасибо за любую помощь!

Редактировать: подробнее о сайте rails.

На корневой странице есть контейнер div, который по умолчанию содержит массив объектов.

Затем у меня есть меню, которое загружает запрос ajax и заменяет содержимое div.stream на результат.

Это означает, что я не могу иметь в файле div.stream значение по умолчанию «Загрузка, пожалуйста, подождите сообщение»

Answer 1

Вам нужно иметь изображение GIF, которое вы отображаете в div, используя position: absolute, и вы показываете div перед выполнением запроса AJAX и скрываете его, когда запрос AJAX завершен.

Вот живой пример JSFiddle , я использую setTimeout для имитации AJAX-запроса длиной 3 секунды.

Answer 2

Это просто. Есть просто изображение, которое показано в погружении контейнера и заменяется ответом ajax, когда оно будет готово.

У вас есть контейнер div для отображения содержимого.

Показать по умолчанию показать загрузку анимированного изображения в lt, как

<div id="container" >
    <img src="ajax-loader.gif" alt="Loading" />
</div>

Когда процесс извлечения контента завершен, и ваш HTML к контенту готов

Заменить div внутренний HTML содержимым страницы.

<div id="container" >
   Replace image with Page content after fetching data ajax/jquery response
</div>

Вы также можете использовать функции ajaxStart / Stop, как показано ниже:

$('#loadingDiv')
    .hide()  
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;
<div id="loading" style="display:none;">
    Loading Please Wait....
    <img src="ajax-loader.gif" alt="Loading" />
</div>