unijimpe

Oye Felicitaciones por tu blog e encontrado un montonal de cosas interesantes en el gracias por tu tiempo ^_^

¡¡Buen truco!!

Sin embargo existe un problema si, como en mi caso, se muestran imágenes con transparencia. En Opera aparece el logo de precarga detrás de la imágen una vez se ha descargado completamente y no hay forma de ocultarlo.

Al final, mediante JavaScript (utilizando Mootools, aunque puede valer cualquier otro framework) conseguí eliminar el logo de precarga de las imágenes que se habían descargado completamente.

Por cierto la función en mootools es la siguiente:

function imagesAsLoaded() {
$$(‘.photo’).each(function(image){
var myImage = new Asset.images(image.getAttribute(‘src’), {
onComplete: function() {
image.addClass(‘loaded’);
}
});
});
};

En CSS ‘loaded’ elimina el background-image de las imágenes cargadas.

Bleyder, excelente observación y sobre todo mejor aún la solución que propones, no se me había ocurrido que pasaría si la imagen es transparente.
Gracias por el aporte.

jajaja.. resulta gracioso como algo q pareciera involucrar un procedimiento mas «complejo». se puede lograr con puro ingenio

Muy bueno!!!!!!
no se me habría ocurrido nunca!

Oye, además, ya lo he probado en un website que tengo también de selecciónd de vídeos de Youtube!!! qué casualidad, no? Pues imagínate: me viene de perlas tu consejo! ;)

http://www.elgrandia.de/cuentosymusica

SERGI

Hola, FELICITACIONES por este sitio, que es muy iteresante…

Yo creia que esto se hacia con Javascript o algo asi y me encuentro con que es simplemente una imagen…

Exelente

Yo esto lo descubri con 15 años (Si, soy bastante precoz xD) y desde entonces no he parado de usarlo, la solucion al problema de las imagenes transparentes es añadir un onload para cambiarle el fondo.

Oyemuy buenos ejemplos pero donde encuentro ejemplos de action script basico-avanzado de AS 2.0 -3.0 y databinding

[…] del post Precargar imágenes con CSS en el cual comentábamos como colocar una imagen de fondo para indicar que se esta cargando una […]

[…] Imagenes con JS Luego del post Precargar imágenes con CSS en el cual comentábamos como colocar una imagen de fondo para indicar que se esta cargando una […]

[…] del post Precargar imágenes con CSS en el cual comentábamos como colocar una imagen de fondo para indicar que se esta cargando una […]

Bleyder
disculpa mi ignorancia.
En el archivo style.css agrego

.loading {
background: url(loading.gif) no-repeat center center;
}

Para no tener el error con imagenes transparentes, donde agrego la función que pusiste? En de la pagina?

A ver si puedo servirte de ayuda.

Esto es lo que pongo en el CSS:

.pic img {background: transparent url(loading.gif) center 85px no-repeat;}

Con la regla anterior lo que consigues es que todas imágenes dentro de un div al que llamo «.pic» aparezcan con el icono de carga.

En el mismo CSS también tengo esta regla:

.pic img.loaded {background-image: none;}

De primeras esta clase no está activada. Más tarde será útil cuando vía JavaScript la vaya añadiendo según se van cargando las imágenes.

Al final de la página (mira este artículo: http://developer.yahoo.com/performance/rules.html#js_bottom) he colocado el código que añadirá la clase loaded a las imágenes:

function imagesAsLoaded() {
$$(‘.pic a img’).each(function(image){
var myImage = new Asset.images(image.getAttribute(‘src’), {
onComplete: function() {
image.addClass(‘loaded’);
}
});
});
};

Esta función está probada con mootools 1.2.1.

A continuación se realiza la llamada a la misma:

imageAsLoaded();

En mi caso particular son las últimas instrucciones que realiza el script de la página.

Espero que mi explicación te haya servido.

Muy sencillo y muy práctico, pero … y si tu galería tiene imagenes q suben los propios usuarios y no puedes darle a la etiqueta un with y un height, ya que cada imagen tiene diferentes tamaños.

Q hacemos?

Si generas el código de la página mediante PHP, ASP, etc. puedes ver qué dimensiones tienen las imágenes que incluyes e indicarlo en el elemento height y width.

Buenas, si la imagen carga por pedazos (de arriba hacia abajo) como se le hace??