Ir para conteúdo

Arquivado

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

Fagner

jQuery .load() mostrar imagem durante processo

Por , em Javascript

Recommended Posts

Fagner    1

Fagner
Postado

Boa tarde,

tentei utilizar o seguinte codigo para exibir uma imagem gif de loading enquanto minha pagina é carregada...

$("#"+selector).html("<img src='images/loading.gif'>");
		$("#"+selector).load( url, function( response, status, xhr ) {
			if ( status == "error" ) {
				var msg = "Ops! Ocorreu um erro durante a leitura do arquivo: ";
				$("#"+selector).html(msg + xhr.status + " " + xhr.statusText);
			}
		});

Porem o loading.gif apenas "pisca" na tela e ela fica em branco até que meu arquivo seja todo carregado... alguem tem alguma sugestão?

 

Att,

Fagner

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Sirotheau    43

Rafael Sirotheau
Postado

Quando eu faço esse tipo de coisa, eu costumo utilizar uma outra div apenas com a imagem de loading, que fica por cima de todo o conteúdo ate o carregamento. Tente dessa forma.

Mas, afinal, esse loading é pra pagina inteira?? Porque, parece ser pra apenas uma porção da pagina.

Se for realmente pra pagina inteira, utiliza classes e escuta o evento load da window.


Ficaria algo assim:

HTML

<body>
  <div class="loading">
    <img src="images/loading.gif" />
  </div>
  ....
</body>

CSS

.loading {
  position: fixed;
  width: 100%;
  height: 100%;
}
.loaded .loading {
  display: none;
}

JS

$(window).on('load',function() {
   $('body').addClass('loaded');
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fagner    1

Fagner
Postado

Valeu pela dica Rafael, não deu certo ainda, mas já peguei a linha de raciocionio de escutar o load(), estou fazendo alguns testes aqui, funcionando eu posto.

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ted k'    126

Ted k'
Postado

Eu sempre uso uma div separada para mostrar o load e outra para mostrar o conteudo, assim que mostrar o conteudo vc oculta a div do load, no caso você não está fazendo isso no seu script, falta o else

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luciano Marques    0

Luciano Marques
Postado

Desse jeito também funciona.  

<div onclick="abrirPag('page.html')"></div>

<div id="suadiv"></div>

  

 function abrirPag(valor){
    var url = valor;
$( "#suadiv" ).load( ""+url+"" );

 document.getElementById("#suadiv").innerHTML = "<img src='img/loading.gif'>";

   
}

Espero ter ajudado também

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