[Resolvido] Existe callback no jquery pra quando hovuer uma troca

[Spyder.RV 0]

Pessoal, existe callback quando a troca de um atributo for bem sucedida?

 

Estou fazendo a troca de imagens dinamicamente conforma abaixo:

 

$('div.carregando').show();
$('#img_foto_album').attr('src', 'URL_DA_IMAGEM'); 

 

Essas imagens vêm da web... tem como inserir um callback pra interceptar o momento que o carregamento concluiu? ou mesmo um evento próprio pra tal fim?

 

Nesse ponto eu faço então o hide do da DIV do loader...

[William Bruno 1501]

é instantâneo, e sempre vai ocorrer.

apenas chame depois.

 

$('div.carregando').show();
$('#img_foto_album').attr('src', 'URL_DA_IMAGEM'); 
//sua outra função aqui.

oq pode acontecer, é o teu loading demorar para carregar, então você pode fazer um pre loading dessa imagem. Pesquise pelo objeto Image()

[Spyder.RV 0]

No caso complica pra fazer um preload porque as imagens são de albuns... são muitas...

[William Bruno 1501]

antes de fazer o .attr(); você faz o pre-load.

 

então assim que acabar, evento onload da imagem, você sabe q está pronta.

 

o callback que você procura não existe, você precisa criar essa situação.

[Spyder.RV 0]

Willian, encontrei o código abaixo, porém não entendi como implementar...

 

 

$.fn.preload = function() { 
this.each(function(){ 
   	$('<img/>')[0].src = this; 
}); 
} 

// Usage: 
$(['img1.jpg','img2.jpg','img3.jpg']).preload();

[William Bruno 1501]

isso vai deixar o teu album lento.

 

faça o preload sob demanda. Qndo requisitar, você faz o preload, e então mostra a imagem no evento onload da mesma.

[Spyder.RV 0]

Mas não entendi como fazer... pesquisei bastante hoje e so encontrei essa solução...

 

na verdade até encontrei outras, mas um tanto complexas... não deu pra sacar como fazer...

[Spyder.RV 0]

Ufa!!! Consegui alguma coisa... tá dando umas falhas, mas dá pro gasto pra começar e entender como funciona...

 

Com essa função, consegui fazer funcionar... Me perdoem pela falta da fonte, mas essa noite na pressa de tentar resolver, acabei perdendo de onde consegui...

$.loadImage = function(image, callback){
  var newImg = document.createElement('img');
  newImg.src = image;
  newImg.onload = function(){
     if ($.isFunction(callback)) {
		callback($(this).attr('src'));
     }
  }
}

 

$('div.carregando').show();

$.loadImage('URL_DA_IMAGEM', function(imagem_carregada){
  $('div.carregando').hide();
  $('#img_foto_album').attr('src', imagem_carregada); 
});

 

 

Me corrijam se eu estiver errado... mas nesse exemplo acima, primeiro vai carregar e armazenar em memória e depois quando ocorrer o callback vai trocar o src da imagem... MAS e se a imagem for "realmente" grande... fiz uns testes aqui e com imagens com tamanho pequeno carrega normal... mas à medida que vão crescendo vai ficando muito lento... inclusive o gif da div carregando chega a "congelar"...

 

Tentei alterar pra já adicinoar o onload direto no $('#img_foto_album') mas não deu certo...

 

$('div.carregando').show();

$('#img_foto_album').src = 'URL_DA_IMAGEM';
$('#img_foto_album').onload = function(){
  $('div.carregando').hide();
}

 

Esse último exemplo aqui não teria que funcionar?

[William Bruno 1501]

o ultimo exemplo não faz sentido.

 

é pelo caminho do primeiro script mesmo. Parabéns.

[Spyder.RV 0]

o ultimo exemplo não faz sentido.

 

é pelo caminho do primeiro script mesmo. Parabéns.

 

Valeu pela força...

 

Existe alguma limitação quanto a tamanho do arquivo?

 

Eu inflei uma imagem pra um tamanho razoável e tem horas que fica só "carragando..." e não sai do lugar...

[William Bruno 1501]

Existe alguma limitação quanto a tamanho do arquivo?

redimensiona com php. Não obrigue o teu visitante a baixar megas e megas de uma imagem.

 

faça um server-side, para otimizar e reduzir a imagem. Tão simples qnto isso.

[Spyder.RV 0]

redimensiona com php. Não obrigue o teu visitante a baixar megas e megas de uma imagem.

 

faça um server-side, para otimizar e reduzir a imagem. Tão simples qnto isso.

 

 

Beleza... eu fiz esse teste inflando o tamanho das imagens justamente pra encontrar um ponto de equilibrio...

 

Valeu pela dica...