Chargement du message

Question

Recherche d'un script js qui affichera un message (quelque chose comme & "Chargement en cours, veuillez patienter &";) jusqu'à ce que la page charge toutes les images .

Important - il ne doit utiliser aucun framework Js (jquery, mootools, etc.), il doit s'agir d'un script js ordinaire.

Le message doit disparaître lorsque la page est chargée.

Answer 1

Oui, une question de vieille école! Cela remonte à l'époque où nous avions préchargé les images ...

Quoi qu'il en soit, voici du code. La magie est la & "Complète &"; propriété de la collection document.images (objets Image).

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

Bien sûr, cela suppose que vous ayez inséré un DIV quelque part:

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

Answer 2

Ajoutez simplement un <div> statique à la page, informant ainsi l'utilisateur que la page est en cours de chargement. Ajoutez ensuite window.onload un gestionnaire et supprimez le div.

BTW, quelle & # 8217; est la raison de cela? Don & # 8217; Les utilisateurs ont-ils déjà un indicateur de chargement de page dans leur navigateur?

Answer 3

Vous devez faire des requêtes ajax async. pour les images et ajouter un rappel une fois l'opération terminée.
Voici du code pour l’illustrer:

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

Answer 4

Théoriquement, vous pourriez avoir un événement onload sur chaque objet image qui exécute une fonction qui vérifie si toutes les images sont chargées. De cette façon, vous n'avez & # 180; pas besoin d'un setTimeOut (). Cela échouerait toutefois si une image & # 180; t ne se chargeait pas, vous deviez donc également prendre en compte l'erreur.