CSS3 загрузочный экран называется jQuery?

Question

Во время тестирования моего веб-приложения для iOS я заметил, что CSS3-анимации были аппаратно ускорены, и хотел переключить мой экран загрузки на CSS3-анимации.

Экран загрузки был простым div, который покрывал экран:

.loading{
position:fixed;
top:0;
left:0;
right:0;
bottom: 0;
z-index: 10;
background-color:#000;
display: none;
}

Содержание моей страницы загружается через AJAX. Загрузка div отображается при загрузке страницы и при повторном выполнении запроса (поэтому запрос AJAX будет перезагружен с обновлением содержимого). То, как я это сделал, использовало:

$('.loading').show()

Прежде всего, затем $('.loading').fadeOout(), как только AJAX-запрос будет завершен.

Затем с помощью кнопки перезагрузки я настроил следующее:

$("#reload").on("click", function() {
    $('.loading').fadeIn()
    doAjax("http://google.com");
    $('.loading').delay(300).fadeOut()
});

Таким образом, когда запрос был перезагружен, он исчезнет на экране загрузки, загрузит содержимое AJAX, подождет 300 мс, а затем исчезнет div.

Теперь, как лучше всего перенести это на CSS3-анимацию? Мне ранее помогали на SO (Duopixel) с этой проблемой, и он смог пройти так далеко: http://jsfiddle.net/E2Srk/

Проблемы с этим решением:

1. div не отображается при загрузке страницы. Это означает, что между показом экрана загрузки есть задержка в несколько секунд.
2. Экран загрузки не исчезает при повторной загрузке AJAX-запроса. Это только показывает, затем исчезает.

Если у кого-то есть идеи о том, как решить эти проблемы, или есть лучшее решение, это было бы замечательно.

Answer 1

Действие 1: Включить Fade-In

Удалив переход из класса .loading.animated, ваша проблема с исчезновением будет исправлена.

Действие 2: включить 3-секундную задержку, чтобы исчезнуть

Чтобы добавить 3-секундную задержку, я просто помещаю removeClass в setTimeout:

setTimeout(function(){
    $('.loading').removeClass("animated");
},3000);

Есливам нравится делать это в стиле jQuery, вы можете использовать это:

$('.loading').delay(3000).queue(function(next){
    $(this).removeClass("animated");
    next();
});

Действие 3: отключить эффект постепенного появления при загрузке страницы

Чтобы отключить постепенное добавлениев начале я применяю трюк, добавляя новый класс .firsttime к div, который отключил анимацию, а затем удаляю ее после вызова Ajax, поэтому все остальные вызовы будут появляться, кроме первого;)

Действие 4: Показать загрузку без задержки при запуске

Чтобы показать загрузку без задержки в первый раз, я добавил .animated class в ваш div в html, чтобы он отображался сразу и не ждал, покаJavaScript!

Действие 5: убрать задержку в 3 секунды при запуске

Чтобы не задерживать загрузку в первый раз, я добавил свойство в функцию doAjax, чтобы проверить, выполняется ли это в первый раз илинет, и если это так, то просто удалите класс .animated в противном случае, добавьте 3-секундную задержку, затем удалите класс.

Обновлен JsFiddle: http://jsfiddle.net/E2Srk/5/

Я надеюсь, что это исправит все вашивопросы: -)