webentwicklung-frage-antwort-db.com.de

jQuery lädt Bilder mit vollständigem Rückruf

Ich sah einen Kommentar in Ben Nadels Blog wo Stephen Rushing einen Loader gepostet hat, aber ich kann nicht herausfinden, wie ich die Selektoren und Parameter übergeben kann.

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

Wenn Sie möchten, dass es geladen wird, bevor Sie es zeigen, können Sie das wie folgt abschneiden:

$(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 Aufruf .one() sorgt dafür, dass .load () nur einmal ausgelöst wird, sodass keine doppelten Einblendungen entstehen. Die .each() am Ende ist darauf zurückzuführen, dass einige Browser das load -Ereignis für vom Cache abgerufene Bilder nicht auslösen. Dies versucht auch die Abfrage in dem von Ihnen geposteten Beispiel.

41
Nick Craver

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

Da ich mich diesem Problem selbst stellen musste, löste ich es, indem ich das DOM-Attribut auf Vollständig überprüfte (was in den meisten gängigen Browsern funktioniert). 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

4
mario-mesiti

Ich wollte diese Funktionalität und wollte definitiv nicht alle Bilder laden, wenn die Seite dargestellt wird. Meine Bilder sind auf Amazon S3 und mit einer großen Fotogalerie, das wäre eine Menge unnötiger 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 eine Miniaturansicht klickt, die einen Satz von Bildern darstellt, lade ich die anderen Bilder zu diesem Zeitpunkt. Der Callback ermöglicht es mir, die CSS zu ändern, nachdem das Bild geladen wurde.

1

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 die oben genannten Werke überall funktionieren ...

0
Jay