Pinceladas da Web

Em um outro post onde mostrei como utilizar Ajax com jQuey surgiu uma dúvida de um usuário de como adicionar uma imagem de carregando enquanto o conteúdo não é totalmente carregado. Isso não é muito difícil de se fazer com jQuery, pois iremos utilizar as funções ajaxStart e ajaxStop da jQuery.

Para esse exemplo, preparei uma marcação HTML muito simples:

<a id="load" href="#" title="Clique aqui para carregar o arquivo">Carregar arquivo</a>
<div id="content"></div>

O HTML é composto de um link que o ser clicado carrega o conteúdo desejado dentro da div content, o javascript necessário será o seguinte:

$(document).ready(function(){
	$('#load').click(function(){
		$('#content').load('load.php');
		return false;
	});

	var loading = $(
		'<img id="loading" alt="Carregando" title="Carregando" src="loading.gif" />'
		).appendTo('#content').hide()
		loading.ajaxStart(function(){
			$(this).show();
		});
		loading.ajaxStop(function(){
			$(this).hide();
		});
});

Nas linhas 2 a 5 do JavaScript, eu indico o arquivo que deve ser carregado dentro da div content, você pode carregar alí o que quiser, arquivos html, php, imagens, eu optei por um arquivo PHP, vocês irão entender o por que mas a frente.

Após eu indico uma variável loading onde armazenei minha imagem de “carregando”, e toda vez que é iniciada uma requisição Ajax essa imagem é mostrada no documento, ao término da requisição Ajax, ela é escondida novamente.

Agora vamos ver o conteúdo do nosso arquivo load.php:

< ?php
// Atrasa a execução da função em 4 segundos
sleep(4);

// Retorna a mensagem
echo "<p>Esse conteúdo foi carregado após 4 segundos!!!";
echo "<img src='ajax.jpg' alt='Ajax' title='Ajax' />";
?>

O conteúdo do arquivo que será carregado nada mais é do que um parágrafo e uma imagem, mas você pode carregar alí o que quiser. Vocês podem estar se perguntado, por que a utilização de uma função sleep(), eu a utilizei para atrasar a execução do script para que vocês possam ver a imagem de carregando com maior clareza, basta definir então o tempo em segundos, que no exemplo foram 4.

Agora vamaos ver o exemplo em ação. Para posteriores estudos, deixo aqui os arquivos para download.