designerFreak planteaba una manera de poner una animación alternativa a las imágenes mientras se cargan.
Pero lo que proponía, sería un pequeño desastre sin no estuviese activado el Javascript, o el CSS.
Además, hay un poco mucho de código, y no parece crossbrowser.
Se me ocurría, que el mejor sistema, sería:
>Un <div>, contiene la imagen.
>Dicho <div>, como fondo, tiene la animación.
>La imagen contenida, tapa el fondo de su contenedor una vez está cargada.
Si se tiene desactivado el CSS o el Javascript la imagen se muestra sin problema.
>Si se tiene javascript, cuando esté cargado el DOM, una función encarga de hacer "invisible" las imagenes del documento.
(style.visibility="hidden")
>El mismo javascript, pone un "onload" a cada imagen, que se encarge de "mostrarla"
(onload="this.style.visibility='hidden'")
Me preguntaba cómo hacerlo con jQuery... y tras leer el manual de Lunatic Lycanthrop, he llegado a algo así:
Código :
<script type="text/javascript" src="http://www.cristalab.com/js/jquery.js"></script>
<script>
$(document).ready(
function()
{$('.prel').each(function()
{$(this).css('visibility','hidden');
$(this).load(function(){$(this).fadeIn('normal');});
}
);
}
);
</script>
<style>
.div {background-image:url('http://www.estilopets.cl/imagenes/loading.gif');
background-repeat:no-repeat; background-position:center center;
border:1px black solid;}
img {width:inherit; height:inherit;}
</style>
<div class="div" style="width:200px;height:150px;">
<img class="prel" src="http://img220.imageshack.us/img220/8020/alienvspredatorck5il1.jpg" /></div>
<div class="div" style="width:200px;height:160px;">
<img class="prel" src="http://img220.imageshack.us/img220/8250/aliensvspredatorrequiemgz1.jpg" /></div>Pero se presentan los siguientes problemas:
- $(this).fadeIn('normal'); No hace nada. Debería presentar la imagen, pero no. En cambio, si la sustituyo por "fadeOut", si que la quita. Es decir... que la sintaxis está bien... pero inexplicablemente (para mí) no funciona la función de jQuery.
- En IExplorer7 las imágenes no heredan ('inherit') el tamaño de su capa contenedora.
Me gustaría en primer lugar, saber qué pasa con la dichosa "fadeIn". En segundo lugar, no estaría mal si a alguien se le ocurre, o conoce metodo más ágil (que seguro los hay)
GRACIAS.
, veran yo no domino mucho lo que es JQuery por no decir casi nada, se de programacion en php, asp, .net y algo de js, pero mi problema reside en JQuery, cuando utilizo los diferentes codigos que estan en la red por ejemplo una especie de galerias de fotos como es LightBox o el VideoBox hueno y otros lo unico que hago es arreglar el codigo a mi conveniencia cuando algo resulta mal lo soluciono pero solamene cuando esta dentro de mis conocimientos o intuicion, hueno en fin, mi problema es el bendito IE7(creo k hasta el 4 es el mejor hasta ahora), no funciona como se deve los efectos u animaciones, me he estado preguntando si se deve a las tablas ya que los sites donde muestran estos demos funcionann bien pero en el mio NA!!!. 
