Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

celsomtrindade

Jquery preloader quando atualizar uma única div

Por , em Javascript

Recommended Posts

celsomtrindade    2

celsomtrindade
Postado

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;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

Buenas tchê.

 

Tenta algo assim:

    $(".loader").ajaxStart(function(){
            $(this).show();
    });
    $(".loader").ajaxComplete(function(){
            $(this).hide();
    });

Compartilhar este post

Link para o post
Compartilhar em outros sites

celsomtrindade    2

celsomtrindade
Postado

 

Buenas tchê.

 

Tenta algo assim:

    $(".loader").ajaxStart(function(){
            $(this).show();
    });
    $(".loader").ajaxComplete(function(){
            $(this).hide();
    });

 

Algo +- assim:

$( function(){

	$(".loader").ajaxStart(function(){
            $(this).show();
        });
        $(".loader").ajaxComplete(function(){
            $(this).hide();
        });	

	$('#content').load('content/home.html');
	$('.head').on( 'click', 'li a', function() {
		var page = $(this).attr('href');
		$('#content').css('position', 'relative').prepend('<div class="loader"></div>');
		$('#content').load('content/' + page + '.html', function() {
			$(this).find('.loader').remove();
		}); 
		return false;
	});
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

celsomtrindade    2

celsomtrindade
Postado

Funcionou?

 

funcionou sim =D

mas eu tive que mudar um negocio no css também.

 

Mas você sabe se é possível eu dar um set no tempo em que o preload aparece?

Por exemplo, vai aparecer por pelo menos 3 segundos antes de dar um fade?

Compartilhar este post

Link para o post
Compartilhar em outros sites

celsomtrindade    2

celsomtrindade
Postado

Bele, agora fechou =D

Vlw aí pelo Help Marlon.

 

Mesclei um pouco do que você passou com o que peguei em um fórum gringo também.

Vou deixar o código aqui, caso alguém esteja procurando por isso também.

$( function(){
    $('#content').load('content/home.html');
    $('.head').on( 'click', 'li a', function(event) {
        event.preventDefault();
        var page = $(this).attr('href');
        $('#content').css('position', 'relative').prepend( $('<div class="loader"></div>'));
        setTimeout(function() {
      	// Do something after 2 seconds
      	$('#content').load('content/' + page + '.html'); 
		}, 2000);
    });
});

css

#content {
	position: relative;
	display: inline-block;
	margin: 65px 0 0 0;
	padding: 20px;
	background: #f0f;
	overflow-x:hidden;
        height: 100%;
        width: 100%;
}

.loader {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ff0 url(http://googl-url-shortener.googlecode.com/files/spin_24x24_loading.gif) center center no-repeat;
    z-index: 1000;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito