jQuery Laden von Bildern mit vollständigen Rückruf

Question

Ich sah a comment on Ben Nadel's blog wo Stephen Rushing einen Loader gepostet, aber ich kann nicht herausfinden, wie ich die Selektoren und Parameter übergeben kann. Ich denke, ich brauche auch eine komplette Callback & 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 
    }); 
}) 

Answer 1

Wenn Sie es vor dem Anzeigen laden möchten, können Sie das trimmen viel, wie dies unten:

$(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 Anruf .one() sorgt dafür .load() wird nur einmal ausgelöst, also keine doppelten Einblendungen. Die .each() am Ende ist, weil einige Browser nicht das load Ereignis für Bilder aus dem Cache ausgelöst, das ist, was die Abfrage in dem Beispiel, das Sie gepostet, versucht, ebenso zu tun.

Answer 2

Versuchen Sie 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, wie die oben genannten Arbeiten überall ...

Answer 3

Sie müssen vorsichtig sein, wenn das Ladeereignis für Bilder verwenden, da, wenn das Bild in dem Cache des Browsers Internet Explorer und (wie ich höre) Chrome gefunden Das Ereignis wird nicht wie erwartet ausgelöst.

Da ich mich selbst mit diesem Problem konfrontiert sah, löste ich das DOM-Attribut komplett (sagte in den meisten gängigen Browsern funktionieren): wenn gleich wahr ist, habe ich das zuvor gebundene 'load' -Ereignis nicht aufgehoben. 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

Answer 4

ich diese Funktionalität wollte und möchte auf jeden Fall nicht haben, um alle Bilder zu laden, wenn die Seite macht. Meine Bilder sind auf Amazon S3 und mit einer großen Fotogalerie, das wäre eine Menge unnötiger Anfragen. Ich habe eine schnelle jQuery-Plugin es here zu handhaben:

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

Also im Grunde, wenn ein Benutzer auf einem Vorschaubild klickt, das eine Reihe von Bildern darstellt, ich zu diesem Zeitpunkt die anderen Bilder laden. Der Rückruf erlaubt mir, die CSS zu ändern, nachdem das Bild geladen wurde.