[Resolvido] Preloader de Imagens

[Henrique Barcelos 290]

Boas, galera ^_^

 

Estava eu aqui quebrando a cabeça para construir um preloader de imagens e finalmente consegui (ou quase)

 

Quem já usou lightbox e cia. sabe como funciona: um loaderzinho é mostrado enquanto a imagem carrega. Quando ela é carregada, o lodaer some a imagem é mostrada.

 

Segue o código [Pré-requisito: jQuery 1.3.2]:

 

function loadImages(){
	if($.browser.msie) return false;
	var img = $("img.loading");
	var array_src = new Array();
	
	$(img).each(function(i){
		array_src[i] = $(this).attr('src');
		var imgWidth = this.width;
		var imgHeight = this.height;
		
		$(this).hide();

 	//Não sei por que, mas sem isso não funciona corretamente no Firefox
		$(this).removeAttr('src').attr('src', array_src[i]);
		
		if (!$(this).prev().is('div.loader')) {
			$(this).before("<div class='loader'><img src='images/loading.gif' alt='Carregando...'/></div>");
			var prev = $(this).prev();
			
			prev.css({
				position: 'relative',
				height: imgHeight + "px",
				width: imgWidth + "px"
			});
			
			var img = prev.find('img');
			var loadingW = img.width;
			var loadingH = img.height;
			img.css({
				position: 'absolute',
				top: '50%',
				left: '50%',
				marginTop: '-'+loadingH/2+'px',
				marginLeft: '-'+loadingW/2+'px'
			});
		}
		
	}).load(function(e){
		var img = $(this);
		img.removeClass('loading').addClass('loaded');
		setTimeout(function(){
			if (img.prev().is('div.loader')) {
				img.prev().fadeOut(400, function(){
					$(this).remove();
					img.fadeIn(400);
				});
			}
		}, 200);
	});
}

 

Ainda não está perfeito.

 

Bugs:

 

• Não funciona corretamente no IE (pra dar uma variada). Quem tiver afim de ver o que acontece e ver se resolve, é só tirar a primeira linha da função.

  O que acontece? Algumas imagens carregam, outras não, vai entender. Vou perguntar pro tio Bill pq não funciona.

• O Chrome tem um bug até conhecido: ao tentar pegar a altura de uma imagem com JS, se a tag <img/> não tiver os atributos width e height setados o Chrome retorna 0.

  O que acontece? Quando a imagem não tem esses atributos, não consigo centralizar o loader.

Quem quiser ver se consegue resolver esses 2 bugs, sinta-se à vontade.

Se achar a solução definitiva, posto aqui http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Hasta la vista, babies! :P