Erkennen, wenn über AJax geladene Ressourcen

Question

Ich fragte kürzlich, wie man erkennt, wenn alle Ressourcen einer Seite geladen wurden, wie Bilder und Stylesheets. Die Antwort kam zurück, benutze $ (window) .load(); Methode in jQuery.

Meine Frage ist jetzt, wie erkenne ich, wenn Inhalt über AJAX geladen wird. AJAX injiziert einige img-Elemente in das DOM ... wie kann ich feststellen, wann diese Bilder geladen sind?

Answer 1

In der Funktion $.get() oder $.post() können Sie den Namen einer Funktion angeben, die aufgerufen wird, wenn die Ajax-Anforderung abgeschlossen ist. Zum Beispiel:

$.get("something.php",{data:'test'},foo); 

function foo() 
{ 
    // This function will be called when the request has completed 
} 

Oder:

$.get("something.php",{data:'test'},function() 
    { 
    //This function will be called in the same way 
    } 

); 

Answer 2

Erkennen, wenn ein Ajax holen ist einfach: Verwenden Sie die Ajax Events in jQuery definiert: http://docs.jquery.com/Ajax

Aber ich bin nicht sicher, dass Sie das fragen gleiche Sache. Um festzustellen, wann ein Bild geladen wird (vermutlich entspricht dies einem Ereignis, wenn das src-Attribut des Bildes geändert wird), können Sie Mutationsereignisse verwenden. http://wiki.github.com/jollytoad/jquery.mutation-events Prost,

jrh.

Answer 3

Wenn Sie $.ajax Aufruf können Sie einen Satz haben eine Callback-Funktion für eine erfolgreiche Anfrage:

$.ajax({ 
    url: _url, 
    type: _type, 
    data: _data, 
    dataType: _dataType, 
    success: _success 
}) 

var _success = function(result) { 
    $html = $(result); 
    alert('HTML downloaded'); 

    // inject HTML into DOM here 
} 

Sie brauchen werden durch $ html zu gehen, um die Bildelemente zu erhalten und für jeden der Bilder registrieren Sie die Callback-Funktion Last, die ausgelöst wird, wenn ein Bild geladen hatte:

$('#myImage').load(function() { 
    alert('Image Loaded'); 
});