Laden Nachricht

Question

für eine js Skript Suchen, die eine gewisse zeigt Nachricht (so etwas wie "Laden, bitte warten") , bis die Seite lädt alle Bilder .

Wichtig -. es darf keinen js Rahmen verwenden (jquery, Mootools, usw.), muss einen Skript js gewöhnlich sein

Meldung muss verschwinden, wenn die Seite geladen wird.

Answer 1

Ja eine Old-School-Frage! Dies geht zurück auf die Tage, wenn wir verwendet, um Bilder vorzuladen ...

Wie auch immer, hier ist etwas Code. Die Magie ist die „vollständige“ Eigenschaft auf der document.images Sammlung (Bildobjekte).

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

Natürlich setzt dies voraus, Sie haben einige DIV in irgendwo geworfen:

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

Answer 2

Fügen Sie einfach eine statische <div> auf der Seite, Benutzer informiert, dass die Seite geladen wird. Dann window.onload Handler hinzufügen und die div entfernen.

BTW, was ist der Grund dafür? Benutzer nicht bereits Seite zu laden Indikatoren in ihren Browsern haben?

Answer 3

Sie sollten für die Bilder async AJAX-Anfragen tun und einen Rückruf hinzufügen, wenn es fertig ist.
Hier einige Code, um es zu verdeutlichen:

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

Answer 4

Theoretisch könnte man ein Onload-Ereignis auf jedem Bildobjekt hat, die eine Funktion ausgeführt wird, das alle Bilder überprüft, ob geladen wird. Auf diese Weise eröffnen Sie bitte benötigen einen setTimeOut (). Dies würde jedoch fehlschlagen, wenn ein Bild Artikel nicht Last, so dass Sie berücksichtigen müssen nehmen onerror auch.