Carregando mensagem

Question

Procurar um script js, que irá mostrar alguns mensagem (algo como "Loading, please wait") até que a página carrega todas as imagens .

Importante -. ela não deve usar qualquer quadro js (jQuery, mootools, etc), deve ser um script js comum

mensagem deve desaparecer quando a página é carregada.

Answer 1

É uma questão em old-school! Isso remonta aos dias em que estamos habituados a imagens de pré-carga ...

De qualquer forma, aqui está um código. A magia é a propriedade "completa" na coleção document.images (objetos de imagem).

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

Claro, isso pressupõe que você tenha algum DIV jogado em algum lugar:

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

Answer 2

Basta adicionar um <div> estática para a página, informando usuário que a página está carregando. Em seguida, adicione manipulador window.onload e remova o div.

BTW, qual é a razão disso? Não usuários já possuem indicadores de carregamento da página em seus navegadores?

Answer 3

Você deve fazer async ajax pedidos das imagens e adicionar uma volta chamada quando estiver terminado.
Aqui está algum código para ilustrar isso:

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

Answer 4

Teoricamente você poderia ter um evento de carregamento em cada objeto de imagem que executa uma função que verifica se todas as imagens é carregado. Desta forma, você não precisa de um setTimeOut (). Isso no entanto falhar se uma carga imagem Não sofreu assim você teria que tomar onerror em conta também.