Efecto Loading mientras carga nuestra pagina web

Crear un efecto de «cargar página» o «loading» en JQuery mientras se van cargando todos los elementos de la página web es realmente sencillo (aunque cuando me toco por primera vez hacerlo, no me lo parecía xD) gracias a la función load() de jQuery.

Ahora un ejemplo sencillo y básico que puedes customizar con css de mil formas.

  • Insertamos un div con id «cargando» al principio o final de la etiqueta body de nuestra página web:

 

<div id="cargando">

</div>

Y desde aquí ya va todo el contenido (divs, imágenes, etc…) de tu pagina …

  • Un poco de CSS al div que aparecerá primero por encima del resto de los elementos (con posición absoluta obviamente) hasta que se carguen todos los elementos del documento, que es cuando este div desaparecerá.
#cargando {
    position:absolute;
    width:100%;
    height:100%;
    background:#fff url(imagenes/loading.gif) no-repeat center;
}
  • Escribimos un pequeño script dentro del «head» de nuestro documento, generalmente:
$(window).load(function () {
  // Una vez se cargue al completo la página desaparecerá el div "cargando"
  $('#cargando').hide();
});

Este es un ejemplo sencillo de como hacer un cargador usando jquery, pero con un poco de imaginación y destreza con CSS puedes hacer un cargador de página mucho más original (Puedes crear diferentes imágenes de loading en http://www.ajaxload.info/).

Importante: La parte crucial de este sencillo loading es el uso de $(window).load() en lugar del clasico $(Document).ready()

para que lo tengan mas claro pueden crear un documento html con imágenes y ver como se comportan ambas.

$(document).ready(function() {
// se ejecuta cuando se carga el documento HTML y DOM está listo
alert("el documento está listo");
});

$(window).load(function() {
// se ejecuta cuando la página completa está completamente cargado,
// incluyendo todos los marcos, objetos e imágenes
alert("la ventana está cargada"); 
});

Descargar ejemplo completo:

[Descarga no encontrada]

Como saber cuando google bot visita nuestro sitio web

google robot

Sí deseas saber el momento exacto y por cuales páginas ha pasado el robot de google (Googlebot) en su o sus sitios web. Solo debes utilizar el siguiente código en el header del sitio y cuando el bot de google aparesca recibiran un email con la IP, navegador y url destino de la araña o robot de google.

Deben cambiar la dirección de email por la suya (obvio), si no les funciona puede ser que su hosting o servidor tengan la funcion mail de php truncada, en ese caso pueden usar la libreria phpmailer ampliamente documentada en internet:

if ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Googlebot' ) != false ){
    mail('miemail@midominio.com', 'Paso de Googlebot', '
        IP: '.$_SERVER['REMOTE_ADDR'].' -
        Sistema operativo y navegador: '.$_SERVER['HTTP_USER_AGENT'].' -
        Web destino: '.$_SERVER['REQUEST_URI'].''
    );
}

y el correo que recibiremos sera parecido a la siguiente captura:

Paso de Googlebot