Es algo que algunos sitios muestran normalmente al final de cada página, pero aparte de ser un dato curioso o de interés para el propio autor del sitio, no conozco ninguna otra utilidad. Por eso, a pesar de ser algo muy sencillo nunca había explicado cómo hacerlo, pero será algo que solucionaremos a continuación.
Esta página se ha cargado en *esperando* segundos.
La cosa se hace con JavaScript y sólo es cuestión de guardar la hora (exacta) a la que comenzamos a cargar la página, recoger también el momento en que termina la carga y luego simplemente hacer una resta para calcular la diferencia de tiempo.
Esto en JavaScript sería así:
<script type='text/javascript'>
//<![CDATA[
var inicio = new Date;
function tiempo_carga(){
var fin = new Date;
var segundos = (fin-inicio)/1000;
var salida = "La pagina ha sido cargada en "+segundos +" segundos";
document.getElementById("tiempoCarga").innerHTML = salida;
}
onload=function() {tiempo_carga();}
//]]>
</script>
//<![CDATA[
var inicio = new Date;
function tiempo_carga(){
var fin = new Date;
var segundos = (fin-inicio)/1000;
var salida = "La pagina ha sido cargada en "+segundos +" segundos";
document.getElementById("tiempoCarga").innerHTML = salida;
}
onload=function() {tiempo_carga();}
//]]>
</script>
El onload hace que la función arranque tras la carga de la página. Ahí es dónde hacemos la segunda lectura de hora, calculamos cuantos milisegundos pasaron con respecto a la primera y por último, imprimimos el resultado.
Para que el cálculo sea lo más aproximado posible al tiempo real trascurrido, el script debería ir casi en la primera línea de código de la página, pero como supongo que unas décimas más o menos no dañan a nadie, lo fácil es ponerlo antes del </head>. Eso sí, si tenéis más cosas por esa zona, que sea antes de todas ellas, lo que nos llevaría a la línea justo después del cierre del SKIN en el caso de Blogger.
Pero tras esto falta algo más. El script va corriendo y cuando se detiene es cuando captura una ID que hemos llamado tiempoCarga para volcar en ella el dato. Por tanto, dónde queramos que se vean los segundos transcurridos hay que añadir una caja con ese nombre:
<div id='tiempoCarga'>Cargando...</div>
Con esto lo podéis montar fácilmente incorporando el dato a un texto:
Esta página se ha cargado en <span id="tiempoCarga"><i>*esperando*</i></span>
...o incluso adornándolo con imágenes:
<div style="width:400px;display:block;margin:0 auto;text-align:center;background:#fff;border:1px solid black;padding:5px;font-size: 90px; line-height: 100px;"><span style="float:right;" id="tiempoCarga"></span><img style="border:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLUUZqM_6BGlmWrsEfKGwJ29YvFYMqjQ0BMGJAPXNdIwWkFvluRaWvwEfUpklZE2smBL07fKGE8OkYoDoDusyk0LyF-YzGGTqV9ifhlK4BMrPu_HKx8u6N4vqmeM5VOaodoWqxK3AM6sI/s400/cronometro.jpg" /></div><div style="clear:both;"></div>
Nota: El semáforo con diseño de reloj de arena lo vi en Yanko Design. Más información sobre ese curioso artilugio en el anterior enlace.
Nota 2: En casa del herrero cuchara de palo. Lo sé ;)
Esta página se ha cargado en *esperando* segundos.
Actualización
Como dije al principio, no veo mucha utilidad para esto salvo que sea para añadir algún detalle resultón a la página o para uso propio. Si lo vais a utilizar para lo segundo quizás lo mejor sería utilizar la clase item-control blog-admin que vimos en otra ocasión. Así, si la añadimos a la caja que mostrará el dato, está sólo será visible para nosotros, los administradores del blog.<div class="item-control blog-admin">
Esta página se ha cargado en <span id="tiempoCarga3"><i>*esperando*</i></span> segundos.</div>
Esta página se ha cargado en <span id="tiempoCarga3"><i>*esperando*</i></span> segundos.</div>
Evidentemente, en este caso la demo no la podréis ver...
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
La verdad es que yo tampoco le he nunca le he visto ninguna utilidad. Es cierto que lo incorporan algunas webs, pero....
ResponderEliminarDe todas maneras, creo que es algo que se ha quedado desfasado y ya se ven pocas paginas con este tipo de informacion. Saludos, Olo!
Lo que si que se puede es aprovechar el script para hacer pruebas con el blog para medir nosotros mismos la velocidad, eso si.
ResponderEliminarEso mismo iba a decir, aunque algunos navegadores, como Chrome, ya traen herramientas para medir la carga de la página, las imágenes, los scripts y las hojas de estilo, todo desglosado. Pero como indicador rápido de que algo no carga bien, puede venir estupendo.
EliminarUn saludo.
Pues combinemos ambas cosas. Post actualizado.
EliminarMuchas gracias por la entrada Oloman, leí en varios sitios la importancia de tener un sitio rápido, finalmente probare el código para administradores.
ResponderEliminarSaludos Oloman, como siempre muy buena explicación.
ResponderEliminarAmigo Oloman,
ResponderEliminarComo siempre, recurro a ti para solucionar un problema con el Blog. Me explico. Hasta ahora yo tenía música en el blog, y lo hacía a través de la página
http://www.mixpod.com
Veo ahora que han dejado ya de hacer este servicio de forma gratuita.
También existía hace tiempo la posibilidad de crear listas de reproducción en
http://www.deezer.com/en/
Pero veo que ahora eso ya no es posible, porque también te exigen que pagues. ¿Sabes tú si existe alguna forma gratuita de seguir teniendo música que se oiga mientras se lee el Blog?
Con mi agradecimiento, siempre sincero, te envío un afectuoso saludo.
Antonio Martín Ortiz
Hola Antonio. La única que recuerdo ahora y que he comprobado que sigue funcionando es GoEar. Lleva bastantes años abierta por lo que supongo que es estable.
EliminarSi fuera ese sólo Félix... Blogger nos carga un montón de scripts automáticamente, que en un principio no figuran en la plantilla. No sé lo que hace ese... ni cómo quitarlo.
ResponderEliminar