javascript:comment écrire $(document).prêt comme un événement sans jquery

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 - que vous devez définir.

Ce qui se passe ici:

• tout d'abord, la fonction DOMContentLoaded est 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 );

 }

Que 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.

C'est tout ce dont vous avez besoin si vous êtes en soutenant IE9+ et moderne (2013) versions 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);

J'ai vu beaucoup de façons différentes d'essayer de le faire. La façon la plus simple (proposé par yahoo d'abord, je pense) est de simplement appeler votre initialiseur de fonction après la clôture balise body, un peu encombrant, mais c'est une seule ligne.

J'ai ce après le "près du corps" tag et avant le "près html' de la balise. et ça marche plutôt bien. Le chargement des presets fonction attribue la largeur,la hauteur et la position de valeurs css des balises div. utile pour les différentes tailles d'écran.

document.onreadystatechange = function () {
if  (document.readyState == "interactive") {
loadPresets();
}

}