jquery: Ereignis für wenn Ajax geladenen Inhalt ist alle geladenen (einschließlich Bilder)

Question

Ich bin in einiger html über Ajax Laden, ich brauche ein Ereignis zu fangen, wenn die neuen Bilder geladen ...

becuase es ist in einem div und nicht eine ganze Seite, kann ich nicht $(window).load(....

ich habe versucht, die folgenden, aber es funktioniert nicht:

$('.banners_col img:last').load(function(){..... 

Answer 1

Sie müssen die Ergebnisse der ajax-Aufruf an Ziel bevor Sie sie in das Dom einfügen.

Sie müssen aus diesem Grund die von jQuery bereitgestellte Rückrufmethode verwenden.

$('#load').click(function(){ 
    // inside the handler that calls the ajax 

    //you ajax call here 
    $.get('the_url_to_fetch',function(data){ 

     // create an in-memory DOM element, and insert the ajax results 
     var $live = $('<div>').html(data); 

     // apply a load method to the images in the ajax results 
     $('img',$live).load(function(){ 
      // what to do for each image that is loaded 
     }); 

     // add the ajax results in the DOM 
     $('selector_where_to_put_the_response').html($live.children()); 
    }); 

}); 

Beispiel bei http://www.jsfiddle.net/gaby/Sj7y2/

---

Wenn mehrere Bilder in der Ajax-Antwort sind und Sie möchten benachrichtigt werden, wenn alle von ihnen geladen werden, dann verwenden Sie diese leicht modifizierte Version

$('#load').click(function(){ 
    // inside the handler that calls the ajax 

    //you ajax call here 
    $.get('the_url_to_fetch',function(data){ 

     // create an in-memory DOM element, and insert the ajax results 
     var $live = $('<div>').html(data); 
     // count the number of images 
     var imgCount = $live.find('img').length; 

     // apply a load method to the images in the ajax results 
     $('img',$live).load(function(){ 
      // what to do for each image that is loaded 

      imgCount--; 
      if (imgCount==0) 
      { 
       // the code in here is called when all images have loaded. 
      } 
     }); 

     // add the ajax results in the DOM 
     $('selector_where_to_put_the_response').html($live.children()); 
    }); 

}); 

Beispiel bei http://www.jsfiddle.net/gaby/Sj7y2/1/

Wenn Sie die Kommentare und die leeren Zeilen entfernen, ist es nicht viel Code :) also nicht einschüchtern ..

Answer 2

Try Live-Funktion zu verwenden Ereignis für HTML-Elemente von Ajax zu triggern

$('.banners_col img:last').live('change',function(){.....