Recientemente Bel Alman (aka Cowboy) ha escrito un pequeño snippet que muestra (o emula) la construcción de la estructura HTML de aquella página en la que lo carguemos.

Únicamente requiere de jQuery, por lo que podemos copiarlo y pegarlo en la consola de Firebug de cualquier página que utilice este popular librería, como por ejemplo, esta misma: inmediatamente veremos cómo el navegador va renderizando cada uno de los elemento con un efecto ‘fade’.

El código es el siguiente:

( function n( e ){
  e.eq( 0 ).fadeIn( 99, function() {
    n( e.slice( 1 ) );
  } );
})( jQuery( ":visible" ).hide() );

Si lo revisamos, vemos que lo primero que hace es ocultar todos los elementos visibles de la página a la vez que los pasa como argumento a la función autoejecutable. Después recorre de nuevo cada uno de los elementos para aplicarles un efecto fadeIn en cascada.

Un código elegante por su sencillez que consigue un efecto interesante.