Carregando imagens com jQuery usando o .load()

• Home-
• javaScript, jQuery/
• autor: Adriano Meira /
• publicado em: 29/11/2012

Um dia desses etava precisando carregar imagens grandes a partir do click em imagens pequenas, e tive o problema com o tempo de carregamento dessa troca de imagens, daí o pessoal do meu trabalho me ajudou a desenvolver um script usando jQuery para fazer este carregamento usando o métdo .load(). Veja abaixo como funciona

Primeiro vamos a estrutura de HTML, veja que aqui eu usei classes e outros elementos que você pode trocar conforme sua necessidade.

<div class="img-grande">
    <a href="imagens/001.jpg" class="abre-foto">
        <img src="imagens/001.jpg" />
    </a>
</div>
<div id="thumbImagens">
    <ul>
    	<li><a rel="imagens/001.jpg"><img src="imagens/thumb_001.jpg" /></a></li>
    	<li><a rel="imagens/002.jpg"><img src="imagens/thumb_002.jpg" /></a></li>
    	<li><a rel="imagens/003.jpg"><img src="imagens/thumb_002.jpg" /></a></li>
    </ul>
</div>

Aqui no meu exemplo temos duas imagens as grandes e as pequenas começadas com o nome “thumb_”, o importante é que no link da imagem pequna tenha a referência da imagem grande, por isso no atributo “REL” da imagem eu coloquei o caminho da imagem grande.

Agora vamos as códigos de jQuey, primeiro iniciamos a biblioteca jQuery e do ease (opcional):

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ease.js"></script>

E agora o código que abre as imagens, veja nos comentários a explicação de cada etapa da execução

<script type="text/javascript">
	//Inicia a biblioteca jQuery
	$(function(){

		//Ao clicar no imagem pequena
		$('#thumbImagens a').click(function(){

			//Guarda o valor do caminha da imagem grande
			var linkAtual = $(this).attr('rel');

			//Procura o link da imagem grande dentro do elemento e muda sua URL
			// Isso aqui é opicional caso deseja que a imagem abra em outra janela ou com
			// algum tipo de ampliação
			$('.img-grande').find('a').attr('href',linkAtual);

			//Procure a imagem grande atual e desapareça com ela
			$('.img-grande').find('img').fadeOut({
				//Tempo de irá durar o desaparecimento da imagem
				duration: 300, 
				//Efeito do ease que vai acontecer em 300 milesegundos
				easing: 'jswing',
				//após acabar o efeito de desaparecer 
				complete: function(){
					//Coloque no atributo IMG o caminho (src) da imagem clicada
					$('.img-grande').find('img').attr('src',linkAtual);
					//Agora faça a leitura do arquivo usando o atributo .load() da imagem
					$('.img-grande').find('img').load(function() {
						//Após acabar a leitura faça a imagem aparecer
						$('.img-grande').find('img').fadeIn(300);
					});
				}
			});
		});
	//Fecha a inicialização da biblioteca jQuery
	});
</script>

Agora vamos dar uma estilizada nos elementos de HTML e colocar um preload na imagem, veja o código de CSS abaixo:

<style type="text/css">
	.img-grande{
		width:445px;
		height:290px;
		overflow:hidden;
		float:left;
		position:relative;
		background:url(imagens/loading.gif) no-repeat center center;
	}
		.img-grande a{}
		.img-grande img{
			width:445px;
		}

	#thumbImagens ul{
		margin:0;
		paddng:0;
		width:445px;
		height:75px;
		list-style:none;
	}
		#thumbImagens li{
			width:110px;
			height:75px;
			float:left;
		}
		#thumbImagens a{ cursor:pointer }
		#thumbImagens img{
			width:100px;
			height:65px;
			margin:5px;
		}
</style>

Veja que coloquei uma imagem de “pre-load” no elemento “.img-grande”, assim quando a imagem desaparecer em “fade” o “pre-load” vai aparecer e ficar por baixo da imagem, se quiser neste link você pode pegar vários tipos de imagens para usar aqui do tamanho que quiser.

Dúvidas ou sugestões postem ai, até mais pessoal

---

Tweet