[SOLUCIONADO] 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.

[maycolalvarez]

¿las fotos son muy grandes?: implementa miniaturas

tambien hay códigos para preloaders, no entendí mucho lo que tratas de explicar

[mbm150]

Basicamente, como se carga antes una imagen? poniendo la etiqueta <img> (como siempre) o creandola desde javascrip? Yo creo que tarda lo mismo, no?

Quiero decir, que tarda menos en cargar, esto:

Código HTML:

<div>
        <img src="imagen.JPG" />
</div>
 

o esto:

Código Javascript:

$(window).on('load', function(){
        var foto=$('<img src="imagen.JPG" />');
        $('div').html(foto);
});
 

La imagen se carga antes en el primer caso, en el segundo o tardan lo mismo en cargarse?

Muchas gracias por responder

[maycolalvarez]

se cargan exactamente igual, la diferencia que hace el preloader es que no las muestra hasta cargar todas