Caricamento del messaggio

Question

Ricerca di uno script js, che mostrerà qualche messaggio (qualcosa come " Caricamento in corso, attendere ") fino a quando la pagina carica tutte le immagini .

Importante - non deve usare alcun framework js (jquery, mootools, ecc.), deve essere un normale script js.

Il messaggio deve scomparire quando la pagina viene caricata.

Answer 1

Sì, una domanda vecchia scuola! Questo risale a quei giorni in cui abbiamo precaricato le immagini ...

Comunque, ecco un po 'di codice. La magia è la & Quot; completa & Quot; proprietà sulla raccolta document.images (Oggetti immagine).

// 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);
  }
};

Naturalmente, questo presuppone che tu abbia qualche DIV lanciato da qualche parte:

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

Answer 2

Basta aggiungere un <div> statico alla pagina, informando l'utente che la pagina si sta caricando. Quindi aggiungere window.onload gestore e rimuovere il div.

A proposito, quale & # 8217; s la ragione di questo? Don & # 8217; t gli utenti hanno già degli indicatori di caricamento della pagina nei loro browser?

Answer 3

Dovresti fare richieste asincrone ajax per le immagini e aggiungere una chiamata al termine.
Ecco un po 'di codice per illustrarlo:

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

Answer 4

In teoria potresti avere un evento onload su ogni oggetto immagine che esegue una funzione che controlla se tutte le immagini sono state caricate. In questo modo non è necessario & # 180; t è necessario un setTimeOut (). Ciò tuttavia fallirebbe se un'immagine non si caricasse & # 180; t, quindi dovresti tenere conto anche dell'erroror.