Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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:
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