cargar imágenes con jQuery devolución de llamada completa

Question

vi a comment on Ben Nadel's blog donde Stephen Rushing registró un cargador, pero no puedo imaginar cómo me puede pasar los selectores y de parámetros .. pienso que también necesito un completeCallback & funciones errorCallback?

function imgLoad(img, completeCallback, errorCallback) { 
    if (img != null && completeCallback != null) { 
     var loadWatch = setInterval(watch, 500); 
     function watch() { 
      if (img.complete) { 
       clearInterval(loadWatch); 
       completeCallback(img); 
      } 
     } 
    } else { 
     if (typeof errorCallback == "function") errorCallback(); 
    } 
} 
// then call this from anywhere 
imgLoad($("img.selector")[0], function(img) { 
    $(img).fadeIn(); 
}); 

HTML:

<a href="#" class="tnClick" ><img id="myImage" src="images/001.jpg" /></a> 

JS:

$(document).ready(function() { 
    var newImage = "images/002.jpg"; 
    $("#myImage").css("display","none"); 
    $("a.tnClick").click(function() { 
     // imgLoad here 
    }); 
}) 

Answer 1

Si quieres que se cargue antes de mostrar, puede recortar que bajar mucho, así:

$(document).ready(function() { 
    var newImage = "images/002.jpg"; //Image name 

    $("a.tnClick").click(function() { 
     $("#myImage").hide() //Hide it 
     .one('load', function() { //Set something to run when it finishes loading 
      $(this).fadeIn(); //Fade it in when loaded 
     }) 
     .attr('src', newImage) //Set the source so it begins fetching 
     .each(function() { 
      //Cache fix for browsers that don't trigger .load() 
      if(this.complete) $(this).trigger('load'); 
     }); 
    }); 
}); 

La llamada .one() se asegura .load() solo se dispara una vez, por lo que no hay fade-ins duplicados. El .each() al final se debe a que algunos navegadores no activan el evento load para las imágenes captadas desde la memoria caché, esto es lo que intentan hacer las encuestas en el ejemplo que usted publicó.

Answer 2

Pruebe este?

doShow = function() { 
    if ($('#img_id').attr('complete')) { 
    alert('Image is loaded!'); 
    } else { 
    window.setTimeout('doShow()', 100); 
    } 
}; 

$('#img_id').attr('src', 'image.jpg'); 
doShow(); 

parece que lo anterior funciona en todas partes ...

Answer 3

Necesitas tener cuidado al usar el evento de carga para las imágenes ya que si la imagen se encuentra en la caché del navegador Internet Explorer y Chrome (me dicen) no lanzará el evento como se esperaba.

Como tuve que hacer frente a este problema yo mismo, resolví comprobando el atributo DOM completo (se dice que funciona en la mayoría de los navegadores principales): si es igual a verdadero, simplemente deshago el evento 'cargado' previamente vinculado. Ver ejemplo:

$("#myimage").attr("src","http://www.mysite.com/myimage.jpg").load(doSomething); 

if ($("#myimage").get(0).complete) { 

    // already in cache? 
      $("#myimage").unbind("load"); 
      doSomething(); 


} 

Esperanza esto ayuda

Answer 4

quería esta funcionalidad y definitivamente no quiero tener que cargar todas las imágenes cuando la página se representa. Mis imágenes están en Amazon s3 y con una gran galería de fotos, sería una gran cantidad de solicitudes innecesarias. He creado un plugin jQuery rápida para manejarlo here:

$("#image-1").loadImage('/path/to/new/image.jpg',function(){ 
    $(this).css({height:'120px'});//alter the css styling after the image has loaded 
}); 

Así que, básicamente, cada vez que un usuario hace clic en una miniatura que representa un conjunto de imágenes, me cargan las otras imágenes en ese punto en el tiempo. La devolución de llamada me permite cambiar el css después de que la imagen se haya cargado.