Cargando mensaje

Question

Buscando un script js, que mostrará algún mensaje (algo así como " Cargando, espere ") hasta que la página cargue todas las imágenes .

Importante: no debe usar ningún marco js (jquery, mootools, etc.), debe ser un script js ordinario.

El mensaje debe desaparecer cuando se carga la página.

Answer 1

¡Sí, una pregunta de la vieja escuela! Esto se remonta a aquellos días en que solíamos precargar imágenes ...

De todos modos, aquí hay un código. La magia es & Quot; completa & Quot; propiedad en la colección document.images (objetos de imagen).

// setup a timer, adjust the 200 to some other milliseconds if desired
var _timer = setInterval("imgloaded()",200); 

function imgloaded() {
  // assume they're all loaded
  var loaded = true;

  // test all images for "complete" property
  for(var i = 0, len = document.images.length; i < len; i++) {
    if(!document.images[i].complete) { loaded = false; break; }
  }

  // if loaded is still true, change the HTML
  if(loaded) {
    document.getElementById("msg").innerHTML = "Done.";

    // clear the timer
    clearInterval(_timer);
  }
};

Por supuesto, esto supone que tienes algún DIV en algún lugar:

<div id="msg">Loading...</div>

Answer 2

Simplemente agregue un <div> estático a la página, informando al usuario que la página se está cargando. Luego agregue window.onload controlador y elimine el div.

Por cierto, ¿cuál & # 8217; es la razón de esto? Don & # 8217; ¿los usuarios ya tienen indicadores de carga de página en sus navegadores?

Answer 3

Debería hacer solicitudes asíncronas de ajax para las imágenes y agregar una llamada cuando haya terminado.
Aquí hay un código para ilustrarlo:

var R = new XMLHttpRequest();
R.onreadystatechange = function() {
  if (R.readyState == 4) {
    // Do something with R.responseXML/Text ...
    stopWaiting();
  }
};

Answer 4

Teóricamente, podría tener un evento de carga en cada objeto de imagen que ejecuta una función que verifica si todas las imágenes están cargadas. De esta manera no necesita & # 180; no necesita un setTimeOut (). Sin embargo, esto fallaría si una imagen no se cargara & # 180; por lo tanto, también debería tener en cuenta un error.