‘Loading’ div antes de que se cargue todo el sitio web

¿Hay alguna forma de mostrar un DIV CARGANDO mientras todos los archivos (imágenes, scripts, archivos js) están cargados?

De hecho, creo que se puede hacer con jQuery / AJAX pero no estoy seguro porque no encontré ninguna solución todavía.

Un buen ejemplo sería Google Adwords (para aquellos de ustedes que tienen una cuenta allí).

Mi script tiene muchas imágenes y archivos js y algunos de ellos son bastante pesados ​​si me preguntas, así que me gustaría mostrarle algo al usuario mientras todo se carga.

NOTA: No creo que SetTimeout sea la solución perfecta porque en realidad no está haciendo el trabajo, solo lo simula.

jQuery tiene varios métodos que pueden manejar esto. Creo que la forma más fácil sería crear un

y usar un alto z-index para cubrir tu página. Entonces, use

  $(window).load(function() { $('#loading').hide(); }); 

para ocultarlo cuando el documento está completamente cargado.

Nota: Esto no necesariamente esperará hasta que todos los métodos de javascript hayan terminado de procesarse. Se activará después de que se reciban del servidor las imágenes, los archivos JS, etc. Sin embargo, si tiene un método JS pesado que procesa la página (por ejemplo, ajusta cada palabra en un div y hace un algoritmo complejo en esto), debe insertar una callback al final de ese método que oculta el cuadro de diálogo de carga.

Usualmente uso el siguiente método: colocar 2 divs: un contenedor y un div de carga. El div de carga debe tener posición: fijado en el css y hecho para que ocupe el 100% de ancho y alto.

En carga, agregaría:

 $("#container").load(url, myFunction); 

donde “url” es una ruta a un fragmento HTML (no una página completa) que se debe inyectar en el contenedor div. myFunction es un puntero a función que debería contener algo como esto:

 $("#loading").fadeOut(500); 

Que se desvanece la carga div durante 500 ms.

Asegúrese de llamar a $ (document) .load () en lugar de $ (document) .ready (), ya que ready se activará antes de que se carguen las imágenes.