Comment détecter document.ready en JavaScript?

Possible en double:
$(document).ready equivalent without jQuery Comment détecter document.ready en JavaScript?

J'ai un cadre moins javascript qui exécute la charge:

function myJs() {  
    // some code 
} 
window.load = myJs;

Mais ce qui provoque un retard dans l'exécution du script . Je veux être capable d'exécuter ce script dès que le document est prêt à être manipulé avant même que la page ne soit complètement chargée. Comment cela peut-il être fait d'une manière compatible avec tous les navigateurs? En d'autres termes, comment le:

$(document).ready(function() { 
    // 
});

de jQuery être dit dans JS simple?

Source

2010-09-28 Thomas

+13

Ouvrez jquery et regardez la fonction .ready. – Chris

J'ai fait une mise en œuvre (basé sur celui qui se trouve dans jQuery) que vous pouvez utiliser: http://github.com/jakobmattsson/onDomReady/blob/master/ondomready.js

Source

2010-09-28 13:52:08 Jakob

Hey, très nouveau à js jere. Pourriez-vous montrer comment implémenter cela? Est-ce que je ferais quelque chose comme: onDomReady (function() {// code ici}); ? – Thomas

vous avez tout à fait raison :) – Jakob

Vous pouvez appeler onDomReady plusieurs fois avec des extraits de code différents si vous le souhaitez également. Ils seront tous exécutés dans l'ordre. Et au cas où ce n'est pas déjà clair, vous devez inclure mon code avant de faire cet appel. Aussi, si vous voulez changer le nom de la fonction ("onDomReady"), faites-le sur la ligne 10 seulement. – Jakob

-2

vous pouvez créer une fonction où que vous l'habitude, l'appel en

`<body onLoad="function();">`

Source

2010-09-28 13:40:46

-1

Put

function myJs() {  
    // some code 
}

dans le <head></head> et

window.load = myJs;

Juste avant </body>

Source

2010-09-28 13:44:38 Shikiryu

Pouvez-vous expliquer au lieu de -1 moi. Peut-être que j'apprendrai quelque chose. – Shikiryu

'.load' est différent de' .ready' - '.load' attend que toutes les images, scripts, ressources externes, etc. soient chargés avant l'exécution, tandis que' .ready' est exécuté une fois que toutes les ressources DOM ont été chargées (ie la structure HTML). Ainsi, si une page contient '.ready' et' .load', '.ready' sera exécuté avant' .load' –

Je vois et après réflexion (et après avoir relu la question, j'ai mal compris) Je suis d'accord . Mais, alors, @Josh Stodola, au lieu de cette réponse merdique et inutile et de tout le monde, pourquoi ne pas répondre directement au gars avec cette explication? :) Je suis assez sûr que c'est le but de stackoverflow de répondre et d'expliquer (même si je viens de m'inscrire) – Shikiryu

//old IE 
document.onreadystatechange = function() { 
    if (this.readyState === "complete"){ 
     //whatev 
    } 
}; 


//for everyone else 
document.addEventListener("DOMContentLoaded", function() { 
    //whatev 
    }, false);

Source

2010-09-28 13:51:51 AutoSponge

La seule version de IE qui supporte nativement 'DOMContentLoaded' est 9. – MooGoo

changé en onDOMContentLoaded pour l'ancienne version d'IE, merci pour le rappel. – AutoSponge

Pas certain à 100% mais certain que IE <9 ne supporte pas l'évènement même avec 'on' qui lui est perpendiculaire. Et je pense que vous vouliez mettre le 'on' dans la fonction 'attachEvent'. – MooGoo

Il est en fait pas si mal. Vous avez besoin d'un moyen d'ajouter des événements à document, et la connaissance de ce que ces événements devraient être. En utilisant la fonction standard addEvent

function addEvent(obj, type, fn) 
{ 
if (obj.addEventListener) 
{ 
    obj.addEventListener(type, fn, false); 
} 
else if (obj.attachEvent) 
{ 
    obj["e"+type+fn] = fn; 
    obj[type+fn] = function() { return obj["e"+type+fn](window.event); }; 
    obj.attachEvent("on"+type, obj[type+fn]); 
} 
}

Vous pouvez effectuer les opérations suivantes:

// IE 
addEvent(document, 'DOMContentLoaded', function() { 
    alert('ready'); 
}); 

// Other 
addEvent(document, 'onreadystatechange', function() { 
    if (document.readyState == 'complete') 
     alert('ready'); 
}); 

// For demonstration purposes, show a 'load' event 
addEvent(window, 'load', function() { 
    alert('load'); 
});

Le gestionnaire d'événements IE tout simplement pas le feu dans d'autres navigateurs, et vice-versa.

Source

2010-09-28 15:05:51

vous avez échangé IE et d'autres je suppose – naugtur

Mais cela provoque un retard dans l'exécution du script. Je veux être en mesure d'exécuter ce script dès que le document est prêt à être manipulé avant même que la page ne soit complètement chargée.

Eh bien, il y a trois façons dont vous pouvez aborder ce problème:

En tant que quelques-uns ont déjà suggéré, vous pouvez tirer l'inspiration à partir du code source jQuery et d'intégrer cela dans votre script. (Je recommande de regarder Paul Irish on jQuery Source et en regardant JS Libs Deconstructed
Vous pouvez placer l'appel de fonction à la fin de la balise body plutôt que dans la balise head, ce qui permet de charger tous les éléments DOM avant le démarrage du script.
Si vous n'avez pas besoin de travailler avec le DOM, vous pouvez simplement en faire une fonction auto-exécutable pour que vous n'ayez pas à attendre quoi que ce soit. (function startNow(){}())

Source

2010-09-28 16:52:30 Moses

Comment détecter document.ready en JavaScript?

Répondre

Questions connexes