Ir para conteúdo

POWERED BY:

Arquivado

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

celsomtrindade

Jquery preloader não funcionando corretamente

Por , em Javascript

Recommended Posts

celsomtrindade    2

celsomtrindade
Postado

E aí pessoal, beleza?

Bom, estou utilizando um preloader, funcionando parcialmente.. É o seguinte:

Quando eu clico em um link dentro do meu WebSite ele faz o fadein do preloader e permanece por um determinado período de tempo, 2s e depois some.

 

O problema é que:

1º- ele some abruptamente, não estou conseguindo fazer um fadeOut do preloader e um fadeIn do novo conteúdo

2º- Quero ter um tempo mínimo de permanência do preloader (2s) para manter a dinâmica do site, mas quando a página precisa de mais tempo, não estou conseguindo deixar. Por exemplo: Permanecer por pelo menos 2s ou pelo tempo necessário para fazer o load na página.

 

Caso vocês queiram visualizar melhor esses problemas, o link de testes que tenho é esse: http://testecmt.hol.es/

E aqui está o código que estou usando:

 

jquery:

$(document).ready( function(){
	var loader = '<div class="loader"></div>'
	$('#content').load('content/home.html');	
	$('body').on( 'click', 'a', function(event) {
		event.preventDefault();

		var page = $(this).attr('href');
		var load = $(loader);
		var content = $('#content');	

		console.log('Clicado em '+ page +'.html');

		content.prepend(load.fadeIn(1000));
		setTimeout(function() {
			content.load('content/' + page + '.html').fadeIn(1500);
		}, 4000);
	});
});

Alguém consegue me ajudar? Ou me dar uma dica do que eu preciso ir procurando para fazer isso?

Ps.: Se possível alguma referência para estudo junto, pois estou começando jquery agora e quero estudar mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Hum.. você pode trabalhar com uma flag, para saber se "pode" ou não cancelar a verificação do "já voltou".

 

Veja:

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
<body>
<nav>
  <a href="contato.html">contato</a>
  <a href="outra.html">outra</a>
  <a href="lenta.php">lentaaaa</a>
</nav>

<article id="content"></article>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
(function($){

  var $document = $('document'),
      $content = $('#content'),
      img = new Image();
      img.src = 'loading.gif'; //preloading gif
      $loading = $('<img src="' + img.src + '" />'),
      ajaxHasReturned = false;

  $('nav').on('click', 'a', function(event){
    var $this = $(this),
        ret,
        intv;

    event.preventDefault();

    ajaxHasReturned = false;
    $content.html($loading);

    intv = setInterval(function(){
      console.log('2000ms has passed');

      if (ajaxHasReturned) {
        clearInterval(intv);
        $content.trigger('ajaxHasReturned', ajaxHasReturned);
      }
    }, 2000);

    ret = $.ajax({
      url: $this.attr('href'),
      type: 'GET'
    });

    ret.then(function(data){
      ajaxHasReturned = data;
    })
  });

  $content.on('ajaxHasReturned', function(event, data){
    $content.html(data);
  });


}(jQuery));
</script>
</body>
</html>
lenta.php

 

<?php


sleep(10);

?>

<h1>Lentaaaaaa....</h1>
contato.html

 

 

<h1>COntato</h1>
entendeu o truque ?

 

Eu fico checando se a requisição voltou com um setInterval a cada 2000ms, se voltou, eu paro o setInterval e mostro, se não, continuo checando até ela voltar.

Assim fico no mínimo 2000ms, e espero as mais demoradas voltarem.

 

Tanto que você vai ver uns 5 ou 6 "2000ms has passed" no console, até que a requisição do lenta.php termine.

 

Acompanhe com o console aberto:

http://wbruno.github.io/examples/ajax-2000ms/

(só o lenta.php que você não vai conseguir ver no github, clone e veja local o efeito.)

Compartilhar este post

Link para o post
Compartilhar em outros sites

celsomtrindade    2

celsomtrindade
Postado

Sim, consegui entender a lógica.. Porém quando coloco no Website, ele não está carregando dentro da minha div #content, ele apenas abre a nova página.

 

Tentei também fazer com que ele puxe o endereço do modo como eu estava fazendo anteriormente, mas não consegui. Ou seja o meu hrfe está assim: href="pagina"

A extensão está sendo adicionada depois.

 

Isto foi o que fiz:

var page = $this.attr('href');

ret = $.ajax({
  url: 'content/' + page + '.html',
  type: 'GET'
});

**Sei que o php para aquele teste não funcionaria, mas eu usei do seu modo antes de fazer isso e, como eu disse, ele até funciona, mas não está carregando dentro da div, e sim abrindo somente a página.**

 

Outra coisa é que, por padrão não está carregando a home.html dentro da div#content para que assim que abrir o site, já tenha algum conteúdo. (não cheguei a testar isso ainda).

 

Editado:

Passei o script para um arquivo externo e coloquei dentro do $(document).ready agora está funcionando.

 

Só estou com o problema de inicialmente inserir o home.html no #content

E de fazer a animação de fadeIn FadeOut do loader

Compartilhar este post

Link para o post
Compartilhar em outros sites

celsomtrindade    2

celsomtrindade
Postado

Bom, consegui resolver uma parte do problema, só não estou conseguindo fazer uma animação correta.

 

1- O loader começa carregando dentro do div#content e depois passa a sobrepor o conteúdo (através de um z-index), fica uma animação abrupta e feia.

---Pretendo manter o preloader cobrindo toda a tela.

 

2- Ao clicar em um menu o conteúdo dentro do div#content simplesmente some, não consegui fazer um fadeOut nele.

 

3- Ao finalizar o Load da page o preloader some sem fadeOut.

 

Esse é o código que tenho no momento:

$(document).ready( function(){
	(function($){

		$('#content').load('content/home.html');

		var loader = '<div class="loader"></div>'
		var $document = $('document'),
		$content = $('#content'),
     	        $loading = loader,
         	ajaxHasReturned = false;

         	$('body').on('click', 'a', function(event){
        		var $this = $(this),
      	        	ret,
         		intv;

         		event.preventDefault();
        	      	ajaxHasReturned = false;
        	      	$content.hide().html($loading).fadeIn(1000);
      		        intv = setInterval(function(){
         			console.log('3000ms has passed');
      		        	if (ajaxHasReturned) {
        	      			clearInterval(intv);
         	  			$content.trigger('ajaxHasReturned', ajaxHasReturned);
         			}
         		}, 3000);

         		var page = $this.attr('href');
         		ret = $.ajax({
         			url: 'content/'+page,
         			type: 'GET'
         		});
         		ret.then(function(data){
         			ajaxHasReturned = data;
         		})
         	});
        	$content.on('ajaxHasReturned', function(event, data){
        		$content.hide().html(data).fadeIn(1500);
        	});
	}(jQuery));
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

O preload "some", pq vc está substituindo ele, e não escondendo e mostrando.

 

Para "sumir", vc precisa que ele fique em outro elemento que não seja o elemento que vai receber o conteúdo.

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