Нужно настроить заставку-прелоадер внутри pjax контейнера,
суть такая, скрипты в хедере и футере не перегружаются, а обработчик скрипта прелоадера я так понял смотрит как раз на готовность страницы где то в этих местах, на какое действие можно заменить исчезновение заставки? В идеале можно просто делать заставку каждый раз на 3 сек. не обращая внимания на загрузку страницы полностью. Кто в js шарит, помогите пожалуйста.
[[head]]
<div id="pjax-container">
<div id="preloader"></div>
<script>
jQuery(document).ready(function($) {
$(window).load(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {});
}, 2000);
});
});
</script>
</div>
[[footer]]
вот на css вариант сделал
<style>
#preloader {
-moz-animation: cssAnimation 0s ease-in 3s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 3s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 3s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 3s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
display:none;
}
}
@-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
display:none;
}
}
</style>
так работает но чет как то не круто)
хотя вот тоже самое
<div id="preloader"></div>
<script>
jQuery(document).ready(function($) {
$('#preloader').delay(1500).fadeOut('slow'); // "удаляет" блок который закрывает body
$('body').delay(10000).css({'overflow':'visible'});// показывает сам body
});
</script>
