jQuery: acontecimiento para cuando el contenido ajax cargado es de todos cargados (incluyendo imágenes)

Question

Estoy cargando en algo de HTML a través de AJAX, necesito un evento para atrapar a cuando se cargan las nuevas imágenes ...

becuase que está en un div y no una página entera, no se puede utilizar $(window).load(....

he intentado lo siguiente pero no funciona:

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

Answer 1

es necesario apuntar a los resultados de la llamada AJAX antes de insertarlos en el dom.

Por lo tanto, debe utilizar el método de devolución de llamada proporcionado por jQuery por este motivo.

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

}); 

ejemplo en http://www.jsfiddle.net/gaby/Sj7y2/

---

Si hay varias imágenes en la respuesta Ajax y desea ser notificado cuando todo de ellos se cargan a continuación, utilizar esta versión ligeramente modificada

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

}); 

ejemplo en http://www.jsfiddle.net/gaby/Sj7y2/1/

---

Si elimina los comentarios y las líneas vacías, que no es mucho código :) por lo que no se dejan intimidar ..

Answer 2

Trate de usar la función en vivo para desencadenar eventos para los elementos HTML desde ajax

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