0

Como faço para animar o Load assim que carregar?

Tem alguma forma para otimizar esse código? Por exemplo se eu tiver na paginas 30 links.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#link-1").click(function(){
        $("#div1").load("teste.html").fadeIn('1500');
    });

    $("#link-2").click(function(){
        $("#div1").load("teste-2.html").fadeIn('1500');
    });

});
</script>
</head>
<body>






<button id="link-1">Get External Content</button>
<button id="link-2">Get External Content</button>


<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>


</body>
</html>

3 Respostas 3

1

Você quer uma animação de loading enquanto carrega o conteudo?

Se for isso, eu faria o seguinte. Eu chamaria o BlockUI antes de chamar o load e no callback de erro e success mandar esconder.

BlockUI - muito útil. http://malsup.com/jquery/block/

Talvez, para ficar bacana, fazer um promisse nesse load, para esconder o blockUI diretamente após o loading, para nao ter problema com o tempo de carregamento X eventos.

O loading interno, você pode fazer de N formas, com gif, com webfont, imagem, mandar girar com css, ai fica sua escolha.

0

1 - Como faço para animar o Load assim que carregar?

Em meus testes tentei utilizar apenas o fadeIn() é não resultou em nada, coloquei um hide() antes e consegui fazer o efeito de transição.

2 - Tem alguma forma para otimizar esse código? Por exemplo se eu tiver na paginas 30 links.

Tem, tudo vai depender da sua necessidade, nesse caso, se você deseja realizar a mesma ação em 30 urls diferentes, porque não fazer uma função ?

Fiz um exemplo, basta passar a url para a função que ele carregará fazendo o efeito de transição FadeIn().

 $("#link-1").click(function() {
   animaLoad("http://fiddle.jshell.net/kjt771nh/show/");
 });

 function animaLoad(url) {
   $("#resposta").hide().load(url).fadeIn(1500);
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id="link-1">Buscar Inforamções de outro html</button>
<div id="resposta"></div>

o Stack Snippet não permite carregar uma página externa, por isto veja o código funcionando aqui : JSFIDDLE

Se você precisar de uma coisa mais caprichada de uma olhada nesse artigo: Collection of page transitions.

0

Assim, se você tiver 30 links, todos eles irão renderizar no mesmo .

Você pode fazer o seguinte.

<script>
  $('#content').html('<img src="myLoading.gif">');
  $('#content').load("http://www.uol.com.br");
</script>
<div id="content"></div>

Com isso o loading vai aparecer e quando o load do html estiver pronto ele troca automaticamente.

você tambem pode fazer algo mais legal ainda, com o blockUI

<script>
  $.blockUI({ message: '<img src="myLoading.gif" />' });
  $('#content').load("http://www.uol.com.br",function(){$.unblockUI();});
</script>
<div id="content"></div>

O .load() do jquery tem um callback que é chamado quando o carregamento estiver completo, nesse evento vc da o unBlockUI.

Veja esse um exemplo desse funcionando aqui.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .