Hola que tal gente!, de nuevo por aquí.
Hoy para preguntar una cosita, que aunque ya he leído bastante de como se puede hacer, tengo que preguntar aquí para compartir puntos de vista.
La cosa es descargar imágenes asíncronamente con jQuery, para después mostrarlas en un img, o un background.
A ver si podéis arrojarme algo de luz respecto a este tema, un saludete!
Yo lo que haría sería guardar la ruta (relativa o absoluta) de la imagen en una capa en la posición donde la quieras mostrar con un data-src (por ejemplo), algo así:
<div id="blabla" class="img" data-src="http://tudominio/imagen.jpg"></div>
Y despues con jquery recuperas el contenido del atributo data-src de todas las clases .img y construyes un elemento img con el src que has recuperado.
No se si es la forma más eficiente pero por lo menos es como lo haría yo.
Saludos
No, no es eso, la cuestión es pedir la imagen conforme la quiera.
Yo puedo descargar todas las imágenes del tirón, si, pero no me interesa por que añado mucha tiempo de carga a la web.
Como son imágenes grandes, que van a una resolución tocha como background, necesito cargarlas asíncronamente, y cuando esté descargada, se cambia por la que esté actualmente.
Podrías llamar a un código en javascript una vez cargada la pagina, que cargue las imagenes y, al terminar la carga, que la ponga en su lugar:
En el momento en el que añades una imagen(<img> ) al DOM se descarga automáticamente, por lo tanto solo tienes que hacer como ha dicho #5
usando jQuery puedes hacer algo así como
var img = $('<img>');
img.attr('src', imageURL);
img.appendTo('#randomDiv');
#6 Bien, pero si quiero por un .gif mientras se descarga la imagen y antes de mostrarla, ¿ como lo haría ?
#7 Pues lo primero que haces es sacar la pantalla de login (gif, whatever) y en el success: de la llamada $.load al final de todo lo quitas y pista.
Supón que quieres mostrar una imagen en un div con id="holder", y un enlace con un data-href que sea la dirección de tu imagen, en el div pones inicialmente una imagen con el spinner:
<div id="holder"><img src="spinner.gif"></div>
HTML:
<a data-href="url-imagen">Ver imagen</a>
JS:
$('#enlace').live('click', function() {
$('#holder').show();
$('#holder').load($(this).data('href');
}
Edit: Se me había olvidado el show();