Cargar imagen

[mbm150]

Hola! He tenido una idea pero no se como llevarla a cabo, a ver si alguien me puede ayudar

He hecho una serie de cuadrados en los que aparece una foto en cada uno, el problema es que al ser mucho (28) tarda demasiado en cargar. He pensado que si cargo el enlace a la foto en una etiquta <a> y despues con jQuery creo la img cogiendo el enlace (no se si me explico).

Haciendo esto carga antes o tardara lo mismo?

En caso de que carge antes, como podria hacerlo? Yo he hecho esto pero no funciona, me carga siempre la primera foto.

Código Javascript:

$(window).on('load', function(){
        var actual=$('#contenedor article .cuadro .frente');
        var foto=actual.children('.foto').attr('href');
        alert(foto);
        var enlace=$('<img src="'+foto+'" />');
        actual.append(enlace);
    });
 

Tambien he intentado esto, pero no carga ninguna foto:

Código Javascript:

$('#contenedor article .cuadro .frente').on('load', function(){
        var actual=$(this);
        var foto=actual.children('.foto').attr('href');
        alert(foto);
        var enlace=$('<img src="'+foto+'" />');
        actual.append(enlace);
    });
 

Muchas gracias por la ayuda.