Publicado em 24 de mar.

jQuery .load() mostrar imagem durante processo

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

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Rafael Sirotheau· 24 de mar.

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

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

Fagner· 25 de mar.

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.

Ted k'· 25 de mar.

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

Luciano Marques· 2 de jun.

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