Una buena forma de evitar tener que añadir un objeto incrustado flash a tus proyectos para conseguir un efecto de fade en tus imagenes cuando cargan es usar Javascript. Mediante una pequeña función javascript asociada al evento onload conseguiremos el efecto que deseamos sin necesidad de tener que recurrir a los grandes frameworks.
El HTML
<div id='photoholder'>
<img src='/images/ithaka.jpg' alt='Photo' id='thephoto' />
</div>Hasta ahora fácil ¿no?. Tenemos una imagen dentro de div.
El CSS
#photoholder {
width:450px;
height:338px;
background:#fff url('/images/loading.gif') 50% 50% no-repeat;
}
#thephoto {
width:450px;
height:338px;
}Añadimos la imagen de cargando al div, de esta forma hacemos que nos muestre el loading… mientras carga la imagen.
El Javascript
document.write("<style type='text/css'>
#thephoto {visibility:hidden;} </style>");Mediante el método write del objeto document añadimos un estilo CSS a nuestro código con el que ocultaremos la imagen. Hemos de tener en cuenta que document.write no funciona cuando el xHTML es enviado como una aplication/xhtml+xml.
Nos quedará añadir a nuestro evento onload la función con la que conseguiremos el resultado buscado.
window.onload = function() {initImage()}initImagen() se encargará de hacer la imagen visible haciendola pasar por un filtro de opacidad hasta llegar a mostrarla completamente.
function initImage() {
imageId = 'thephoto';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}Debido a los problemas con los diferentes navegadores, se opta por separar esta función del resto para conseguir adaptarlo a futuras modificaciones de forma más cómoda.
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}fadeIn() se encargará de realizar el bucle que irá incrementando en 10 la opacidad de la imagen, hasta llegar al 100% que nos dará como resultado la imagen que queremos mostrar.
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}Accesibilidad
De esta forma conseguimos que nuestra web funcione sin necesidad de disponer de JS o CSS, aunque no podamos disfrutar de efecto.
| CSS & JS | Imagen de ‘loading…’ visible y la foto aparece al cargase. Vemos el efecto |
|---|---|
| No CSS or JS | No vemos la imagen de loading, pero la foto carga con la página. |
| CSS but no JS | Vemos la imagen de loading, y la foto carga con la página |
| JS but no CSS | No aparece la imagen de loading, y la foto aparece con la página, vemos el efecto dependiendo del motivo de la falta de CSS |
10 comentarios, 2 referencias
+
#