Jquery preloader quando atualizar uma única div
E aí pessoal, tudo certo?
Seguinte, estou com um pequeno problema..
Estou tentando colocar um preloader em um website que estou construindo, consegui colocar no site de modo geral (ao acessar pela primeira vez), até aí tudo certo.
Porém a navegação do site se da através de um menu em ajax que atualiza o conteúdo somente de uma div (#content) e é aí que eu não estou conseguindo inserir o preloader. Alguém consegue me ajudar? Já tentei de tudo - menos o método correto, obviamente hahaha!
Esses são os códigos que tenho
Só lembrando, o conteúdo da div content está no diretorio: content/"nome_da_pagina".php
Html - index.php
<body>
<div class="head">
<ul>
<li><a href="home">Home</a></li>
<li><a href="lutas">Lutas</a></li>
<li><a href="outro">Outro</a></li>
<li><a href="contact">Contato</a></li>
</ul>
<div class="lr" ></div>
<div class="lc" ></div>
</div>
<div id="content"><!-- content ajax -->
<div class="loader">Please wait</div>
</div><!-- /content ajax -->
</body>E aqui o meu scripts.js
$(document).ready(function(){
$('#content').load('content/home.php');
$('.head').on( 'click', 'li a', function() {
setTimeout( function() { $('.loader').show(); }, 1000 );
setTimeout( function() { $('.loader').hide(); }, 4000 );
var page = $(this).attr('href');
$('.loader').show();
$('#content').load('content/' + page + '.php', function(){
//alert('Load of ' + page + ' is complete.');
console.log ('Load of ' + page + ' is complete.');
$('.loader').hide();
});
return false;
});
});E, por último, o CSS referente a esses 2 conteúdos:
#content {
position: relative;
padding: 80px 0 0 0;
overflow-x:hidden;
height: -moz-calc(100% - 80px);
height: -webkit-calc(100% - 80px);
height: calc(100% - 80px);
width: 100%;
background: #f0f;
}
.loader {
display: none;
position: absolute;
width: 300px;
height: 300px;
margin: 0 auto;
top: 0; left: 0; right: 0; bottom: 0;
background: #ff0 url(../img/bg/spin.gif) center center no-repeat;
z-index: 999;
}Discussão (6)
Carregando comentários...