callback de carga de imagen jQuery

Question

Añadiendo dinámicamente una imagen a la página después de la carga y luego la interacción del usuario y tengo problemas para ejecutar una función después de que la imagen se haya cargado por completo. Pensé que usar el método .load() de jQuery estaría bien ... pero según mi consola y un montón de documentar .log negocios, nunca se ejecuta. Ver abajo ... ¡gracias!

$('body') 
    .append('<img id="ad" src="img/ad.jpg" alt="Advertising Network" />') 
    .load(function(){ 
     console.log('ad load complete'); 
     $('#submit').click(); 
    }); 

---

UPDATE:

Para aclarar, esto es después de que tanto la carga document y window.

Answer 1

En su código .load() se relaciona con el body debido al encadenamiento.

Cambiar el código para:

var img = $('<img id="ad" src="img/ad.jpg" alt="Advertising Network" />'); 
img.load(function(){ 
    console.log('ad load complete'); 
    $('#submit').click(); 
}); 

$('body').append(img); 

y debería funcionar (http://jsfiddle.net/zerkms/f7epb/)

Answer 2

La función append devuelve el elemento que contiene, no la que se añade, por lo que va a enlazar su función a la carga del cuerpo y no a la img.

sugiere emplear appendTo, así:

$('<img id="ad" src="img/ad.jpg" alt="Advertising Network" />') 
.load(function(){ 
    console.log('ad load complete'); 
    $('#submit').click(); 
}) 
.appendTo($('body'));