Jump to content
Fagner

jQuery .load() mostrar imagem durante processo

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.