Contenido

Fade a imagenes en el evento onLoad

5 Nov

+ 12

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

+

#

  1. meneame.net 05/11/2006 06:11
  2. aldead.com 05/11/2006 09:11
  • Para temas de accesibilidad o más bien de validación de W3C yo propondría no usar CSS incrustrado.

    Aunque sería más complicado y habría que cambiar todo ya que sino recuerdo mal prevalece la propiedad en la hoja de estilo aunque la cambies con JavaScript (en este sentido es posbile que no lo haya hecho bien otras veces).

    Es decir, bufff, la verdad es que hay varias formas:

    * Una, ahora que recuerdo y que valida sin usar CSS incrustrado como estilo independiente es usar el atributo «style» en el elemento, sino recuerdo mal eso valida y es igual de funcionnal.

    * También se puede usar una clase CSS para ocultar elementos y cambiar ese atributo del elemento con JavaScript pero como decía creo que no funciona.

    * Usar CSS dinámico con JS, esto no lo he hecho nunca y no sé si digo una tontería, solo sé que recuerdo haber leido algo de esto y es igual (aunque sea en el cliente) que cuando generas CSS con PHP.

    No??… 🙁

    Un saludo.

  • Covi, creo que te has hecho un lio xDDD

    Por accesibilidad no hay problema ya que la imagen se muestra sin que ejecutemos CSS ni Javascript. El tema de validación, depende más de la estructura que de la funcionalidad javascript.

    Usar el style, aunque en algunos casos (solo un pequeño atributo) no se recomienda ya que te obliga a tocar la capa de estructura(HTML) para algo que debería estar definido en la capa de diseño (CSS), pero como tu bien dices, si que valida, si únicamente tenemos este estilo no vamos a crear un CSS con una sola línea.

    Usar una clase y cambiar el atributo con Javascript, ¿no es lo que hace arriba en el post?

    Usar un CSS dinámico con JS?¿?¿ Ufff, que mareo he pillao intentando entender esto. Desde el servidor (PHP,…) podemos construir una clase CSS dinámicamente, pero desde JS no creo que se pueda hacer algo así. Podemos cambiar todo el diseño de la página mediante modificaciones en el DOM pero directamente al CSS … no se si se puede hacer….

  • Si, por eso dije validación (como jode no poder editar 🙁 )

    Ya… es chungo, mezclamos diseño visual con estructura pero por contradictorio que parezca valida, personalmente creo que en definitiva es igual de «sucio» que incrustar CSS 🙁

    Usar una clase y cambiar el atributo con Javascript, ¿no es lo que hace arriba en el post?

    Si pero me refería con una clase en un CSS externo 🙁 , a eso me refería sobre que creo que no funciona, o al menos, yo creo haberlo intentado y no funcionar, repito una clase de un CSS externo, no incrustrado vamos.

    Gggg, pos eso, yo también estaba mareao con eso 😀 es que creo recordar haber leido algo de Javascript en CSS… de cualquier modo no lo sé.

  • ¿Pero en que momento no valida? No entiendo por que dices que no valida, yo veo que si lo hace.

    Sobre lo de cambiar la clase del CSS externo puede hacerlo desde Javascript sin ningun problema, con el atributo className deberías cambiar la clase de un elemento, mediante Javascript.

  • Ok… esto último es lo que no sabía e imaginaba que se podía hacer, thx! 😉

    Que yo sepa, (no sé en otro tipo de documentos) el CSS incrustrado no valida como XHTML 1.0 en el W3C, y con Javascript se añade CSS para ocultar la imagen, no?.

    Mi idea, por si servía, era solamente esa, en vez de incrustrar CSS, usar alguna clase genérica en tu hoja/s CSS para ocultar imágenes, opacidad o lo que sea, y luego cambiarla con JavaScript en el elemento, pero vamos, solo por validar y no incrustrar CSS.

    Que solo creía que podía ayudar 🙁

    gggg… en el fondo, parece que nos hemos (o me he) liao un poco xDD

  • El problema es que el validador de W3C no ejecuta el Javascript, por ese motivo no da ningún problema. Ya que no incrusta nada en la estructura, únicamente se incrusta en el DOM generado por el navegador de usuario 😀

    Creo que eso ha sido todo el lio, es que a estas horas no podemos hablar de cosas serias 😀

    un saludo fiera

  • Pues sí, solo era eso xDDD

    Tapronto!

    PD: Creo que en ocasiones como estas… los blogs necesitan foros 😉 , sorry de nuevo.

  • Pues la verdad es que he pensado en usar bbpress, pero quizas con el theme nuevo 😀

    un saludo

  • Eres un crack nieto !!! Ya hay una solución para poner el javascript fuera ?

  • Funciona de maravilla, pero si quiero cargar 7 o mas imagenes a la vez solo acaba cargando la 1a porque todas tienen el mismo id. ¿Alguna idea?

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.