dans jquery $ (document) .ready (fonction) ou $ (fonction), comment pourrais-je faire la même chose sans jquery, et j’ai besoin d’un navigateur compatible, et permettre d’attacher plus d’une fonction.
Réponses
Trop de publicités?
C'est la façon jQuery encapsule les fonctions que vous êtes à la recherche pour - l'extrait de code n'a pas besoin de jQuery, et est compatible avec tous les navigateurs. J'ai remplacé tous les appels à jQuery.prêt() avec yourcallback - dont vous avez besoin à définir.
Ce qui se passe ici:
- tout d'abord, la fonction
DOMContentLoadedest défini, qui sera utilisé lors de l'événement DOMContentLoaded feux - il s'assure que le callback n'est appelé qu'une seule fois. - vérifier si le document est déjà chargé - si oui, le feu le rappel tout de suite
- sinon, sniff pour les fonctionnalités (
document.addEventListener/document.attachEvent) et de lier les callbacks (différent pour IE et les navigateurs normales, plus le rappel onload)
Levée de jQuery 1.4.3, les fonctions bindReady() et DOMContentLoaded:
/*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
// Cleanup functions for the document ready method
// attached in the bindReady handler
if ( document.addEventListener ) {
DOMContentLoaded = function() {
document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
//jQuery.ready();
yourcallback();
};
} else if ( document.attachEvent ) {
DOMContentLoaded = function() {
// Make sure body exists, at least, in case IE gets a little overzealous
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", DOMContentLoaded );
//jQuery.ready();
yourcallback();
}
};
}
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
//return setTimeout( jQuery.ready, 1 );
// ^^ you may want to call *your* function here, similarly for the other calls to jQuery.ready
setTimeout( yourcallback, 1 );
}
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
//window.addEventListener( "load", jQuery.ready, false );
window.addEventListener( "load", yourcallback, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", DOMContentLoaded);
// A fallback to window.onload, that will always work
window.attachEvent( "onload", yourcallback );
}
C'est de 51 lignes de JavaScript code, il vous suffit de vous inscrire à l'événement de manière fiable. Autant que je sache, il n'existe pas de méthode plus facile. Va à montrer ce que les wrappers comme jQuery sont bons pour: ils ajoutent la capacité de renifler et laid problèmes de compatibilité, de sorte que vous pouvez vous concentrer sur autre chose.
shawndumas
Points
842
Le plus petit code DOMReady, jamais.
<html>
<head>
<script>
var ready = function (f) {
(/complete|loaded|interactive/.test(document.readyState)) ?
f() :
setTimeout(ready, 9, f);
};
</script>
</head>
<body>
<script>
ready(function () {
alert('DOM Ready!');
});
</script>
</body>
</html>
Casey
Points
767
C'est tout ce dont vous avez besoin si vous supportez IE9 + et les versions modernes (2013) de Chrome, FF, Safari, etc.
function ready(event) {
// your code here
console.log('The DOM is ready.', event);
// clean up event binding
window.removeEventListener('DOMContentLoaded', ready);
}
// bind to the load event
window.addEventListener('DOMContentLoaded', ready);
user394424
Points
29
Voici une méthode que j'utilise qui semble fonctionner de manière fiable
function ready(func) {
var span = document.createElement('span');
var ms = 0;
setTimeout(function() {
try {
document.body.appendChild(span);
document.body.removeChild(span);
//Still here? Then document is ready
func();
} catch(e) {
//Whoops, document is not ready yet, try again...
setTimeout(arguments.callee, ms);
}
}, ms);
}
Assez simple, il ne cesse d'essayer d'ajouter un vide <span> élément d' document.body. Si le document n'est pas "prêt", une exception sera levée, auquel cas il essaie à nouveau avec un nouveau setTimeout appel. Une fois aucune exception n'est levée, il appelle la fonction de rappel.
Je serais heureux de les entendre s'il y a des problèmes avec cette méthode. Il a bien fonctionné pour moi, mais je n'ai pas fait le test approfondi qu'il serait naturel de n'importe quel framework Javascript.
Juan Mendes
Points
31678
