jQuery chargement des images avec rappel complet

Question

J'ai vu a comment on Ben Nadel's blog où Stephen Rushing posté un chargeur, mais je ne peux pas comprendre comment je peux passer les sélecteurs et le paramètre .. Je pense que j'ai aussi besoin d'un fullCallback & errorCallback fonctions?

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 vous voulez charger avant de montrer, vous pouvez couper cette baisse beaucoup, comme ceci:

$(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'); 
     }); 
    }); 
}); 

L'appel .one() s'assure .load() ne se déclenche qu'une seule fois, donc pas de fade-in en double. Le .each() à la fin est parce que certains navigateurs ne déclenchent pas l'événement load pour les images récupérées à partir du cache, c'est ce que l'interrogation dans l'exemple que vous avez posté essaie également de faire.

Answer 2

Essayez celui-ci?

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

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

On dirait que les travaux ci-dessus partout ...

Answer 3

Vous devez être prudent lorsque vous utilisez l'événement de chargement pour les images car si l'image se trouve dans le cache du navigateur IE et (on me dit) Chrome ne déclenchera pas l'événement comme prévu. Comme j'ai dû résoudre ce problème moi-même, j'ai résolu le problème en vérifiant l'attribut DOM complet (fonctionnant dans la plupart des navigateurs principaux): s'il est égal à vrai, je n'ai pas lié l'événement 'load' précédemment lié. Voir par exemple:

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

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

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


} 

Hope this helps

Answer 4

Je voulais cette fonctionnalité et ne voulais pas avoir à charger toutes les images lorsque la page rend. Mes images sont sur Amazon s3 et avec une grande galerie photo, ce serait beaucoup de demandes inutiles. J'ai créé un plugin jQuery rapide pour gérer here:

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

Donc, fondamentalement, chaque fois qu'un utilisateur clique sur une vignette qui représente un ensemble d'images, je les charger d'autres images à ce moment. Le rappel me permet de changer le css après le chargement de l'image.