jQuery lädt Bilder mit vollständigem Callback

ich sah ein Kommentar im Blog von Ben Nadel wo Stephen Rushing einen Loader gepostet hat, aber ich kann nicht herausfinden, wie ich die Selektoren und Parameter übergeben kann …

Ich glaube, ich brauche auch eine completeCallback und errorCallback Funktionen?

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
    });
})

Wenn Sie möchten, dass es geladen wird, bevor es angezeigt wird, können Sie das stark reduzieren, wie folgt:

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

Der .one() Aufruf stellt sicher, dass .load() nur einmal ausgelöst wird, also keine doppelten Einblendungen. Der .each() am Ende liegt daran, dass einige Browser das nicht auslösen load Ereignis für aus dem Cache abgerufene Bilder, dies versucht auch die Abfrage in dem von Ihnen geposteten Beispiel.

Sie müssen vorsichtig sein, wenn Sie das Load-Ereignis für Bilder verwenden, da Chrome das Ereignis nicht wie erwartet auslöst, wenn das Bild im Cache des Browsers gefunden wird. IE und (mir wurde gesagt) wird das Ereignis nicht ausgelöst.

Da ich selbst mit diesem Problem konfrontiert war, habe ich es gelöst, indem ich das DOM-Attribut vollständig überprüft habe (sollte in den meisten gängigen Browsern funktionieren): Wenn gleich wahr ist, habe ich nur das zuvor gebundene ‘load’-Ereignis gelöst. Siehe Beispiel:

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

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

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


}

Hoffe das hilft

Ich wollte diese Funktionalität und wollte definitiv nicht alle Bilder laden müssen, wenn die Seite gerendert wird. Meine Bilder sind auf Amazon s3 und mit einer großen Fotogalerie wären das viele unnötige Anfragen. Ich habe ein schnelles jQuery-Plugin erstellt, um damit umzugehen Hier:

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

Wenn also ein Benutzer auf ein Miniaturbild klickt, das eine Reihe von Bildern darstellt, lade ich im Grunde die anderen Bilder zu diesem Zeitpunkt. Der Rückruf ermöglicht es mir, das CSS zu ändern, nachdem das Bild geladen wurde.

Probier diese?

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

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

Scheint, als ob das obige überall funktioniert …