gratis - instalar javascript

Javascript-Cómo detectar si el documento se ha cargado(IE 7/Firefox 3)

Question

Quiero llamar a una función después de cargar un documento, pero el documento puede o no haber terminado de cargarse todavía. Si se cargó, entonces puedo llamar a la función. Si NO se cargó, entonces puedo adjuntar un detector de eventos. No puedo agregar un eventlistener después de que la carga ya se haya activado, ya que no se llamará. Entonces, ¿cómo puedo verificar si el documento se ha cargado? Probé el código a continuación, pero no funciona del todo. ¿Algunas ideas?

var body = document.getElementsByTagName(''BODY'')[0];
// CONDITION DOES NOT WORK
if (body && body.readyState == ''loaded'') {
    DoStuffFunction();
} else {
    // CODE BELOW WORKS
    if (window.addEventListener) {  
        window.addEventListener(''load'', DoStuffFunction, false);
    } else {
        window.attachEvent(''onload'', DoStuffFunction);
    }
}

Answer 1

El anterior con JQuery es la forma más fácil y más utilizada. Sin embargo, puede usar javascript puro, pero trate de definir este script en el encabezado para que se lea al principio. Lo que estás buscando es el evento window.onload .

Debajo hay un script simple que creé para ejecutar un contador. El contador luego se detiene después de 10 iteraciones

window.onload=function()
{
    var counter = 0;
    var interval1 = setInterval(function()
    { 
        document.getElementById("div1").textContent=counter;
        counter++; 
        if(counter==10)
        {
            clearInterval(interval1);
        }
    },1000);

}

Answer 2

Mozila Firefox dice que onreadystatechange es una alternativa a DOMContentLoaded .

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "complete") {
        initApplication();
    }
}

En DOMContentLoaded el documento de Mozila dice:

El evento DOMContentLoaded se activa cuando el documento se ha cargado y analizado por completo, sin esperar a que las hojas de estilo, imágenes y subtramas finalicen la carga (el evento de carga se puede usar para detectar una página completamente cargada).

Creo que load event debería usarse para una carga completa de documentos + recursos.

Answer 3

No hay necesidad de todo el código mencionado por galambalazs. La forma de navegador cruzado para hacerlo en JavaScript puro es simplemente para probar document.readyState :

if (document.readyState === "complete") { init(); }

Esta es también la forma en que jQuery lo hace.

Dependiendo de dónde se cargue JavaScript, esto se puede hacer dentro de un intervalo:

var readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        clearInterval(readyStateCheckInterval);
        init();
    }
}, 10);

De hecho, document.readyState puede tener tres estados:

Devuelve "cargando" mientras el documento se está cargando, "interactivo" una vez que se termina de analizar, pero sigue cargando sub-recursos, y "completa" una vez que se ha cargado. - document.readyState en Mozilla Developer Network

Entonces, si solo necesita que DOM esté listo, verifique document.readyState === "interactive" . Si necesita que la página completa esté lista, incluidas las imágenes, verifique document.readyState === "complete" .

Answer 4

No hay necesidad de una biblioteca. jQuery usó este script por un tiempo, por cierto.

http://dean.edwards.name/weblog/2006/06/again/

// Dean Edwards/Matthias Miller/John Resig

function init() {
  // quit if this function has already been called
  if (arguments.callee.done) return;

  // flag this function so we don''t do the same thing twice
  arguments.callee.done = true;

  // kill the timer
  if (_timer) clearInterval(_timer);

  // do stuff
};

/* for Mozilla/Opera9 */
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init, false);
}

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
  document.write("<script id=__ie_onload defer src=javascript:void(0)><//script>");
  var script = document.getElementById("__ie_onload");
  script.onreadystatechange = function() {
    if (this.readyState == "complete") {
      init(); // call the onload handler
    }
  };
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
  var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      init(); // call the onload handler
    }
  }, 10);
}

/* for other browsers */
window.onload = init;

Answer 5

Probablemente desee utilizar algo como jQuery, que facilita la programación de JS.

Algo como:

$(document).ready(function(){
   // Your code here
});

Parecería hacer lo que está buscando.

Answer 6

Prueba esto:

var body = document.getElementsByTagName(''BODY'')[0];
// CONDITION DOES NOT WORK
if ((body && body.readyState == ''loaded'') || (body &&  body.readyState == ''complete'') ) {
    DoStuffFunction();
} else {
    // CODE BELOW WORKS
    if (window.addEventListener) {
        window.addEventListener(''load'', DoStuffFunction, false);
    } else {
        window.attachEvent(''onload'',DoStuffFunction);
    }
}

Answer 7

Si realmente desea que este código se ejecute en carga , no en domready (es decir, necesita que las imágenes se carguen también), desafortunadamente la función de listo no lo hace por usted. Por lo general, solo hago algo como esto:

Incluir en el documento javascript (es decir, siempre llamado antes de que se active la carga):

var pageisloaded=0;
window.addEvent(''load'',function(){
 pageisloaded=1;
});

Entonces tu código:

if (pageisloaded) {
 DoStuffFunction();
} else {
 window.addEvent(''load'',DoStuffFunction);
}

(O el equivalente en su marco de preferencia.) Uso este código para hacer precaching de javascript e imágenes para páginas futuras. Como las cosas que obtengo no se usan para esta página en absoluto, no quiero que tengan prioridad sobre la descarga rápida de imágenes.

Puede haber una manera mejor, pero todavía tengo que encontrarlo.

Answer 8

Tengo otra solución, mi aplicación debe iniciarse cuando se crea un nuevo objeto de MyApp, por lo que se ve así:

function MyApp(objId){
     this.init=function(){
        //.........
     }
     this.run=function(){
          if(!document || !document.body || !window[objId]){
              window.setTimeout(objId+".run();",100);
              return;
          }
          this.init();
     };
     this.run();
}
//and i am starting it 
var app=new MyApp(''app'');

está funcionando en todos los navegadores, eso lo sé.

Answer 9

if(document.loaded) {
    DoStuffFunction();
} else {
    if (window.addEventListener) {  
        window.addEventListener(''load'', DoStuffFunction, false);
    } else {
        window.attachEvent(''onload'', DoStuffFunction);
    }
}