jQuery chargement des images avec rappel complet

J'ai vu un commentaire sur Ben Nadel blog où Stephen se Précipiter posté un chargeur, mais je ne peux pas savoir comment je peux passer les sélecteurs et les paramètres..
Je pense que j'ai aussi besoin d'un completeCallback & 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
    });
})

source d'informationauteur FFish | 2010-03-06

  1. 40

    Si vous voulez qu'il se charge avant de les présenter, vous pouvez couper que 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');
        });
    });
});

    La .one() appel permet de s'assurer .load() ne se déclenche une fois, donc pas de double fade-ins. Le .each() à la fin, c'est parce que certains navigateurs ne pas le feu à la load cas pour les images récupérées à partir du cache, c'est ce que le bureau de vote dans l'exemple que vous avez posté est en train d'essayer de faire aussi bien.

  2. 4

    Vous devez être prudent lors de l'utilisation de l'événement load image car si l'image est trouvée dans le cache du navigateur IE et I m'a dit) Chrome ne se déclenche pas l'événement comme prévu.

    Depuis que j'ai eu à faire face à ce problème moi-même, je l'ai résolu en vérifiant les DOM attribut complète (dit-on travailler dans la plupart des principaux navigateurs): si est égal à true je viens de unbinded précédemment lié à la "charge" de l'événement. Voir l'exemple:

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

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

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


}

    Espère que cette aide

  3. 1

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

    $("#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 de photos, je charge les autres images à ce point dans le temps. Le rappel me permet de modifier le css une fois l'image chargée.

  4. 0

    Essayer 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();

    Semble comme ci-dessus fonctionne partout...