un mot de mise en garde sur l'utilisation de $(document).ready() avec Internet Explorer. Si une requête HTTP est interrompue avant , le document entier est chargé (par exemple, pendant qu'une page est transmise au navigateur, un autre lien est cliqué), ce qui déclenche l'événement $(document).ready .

si l'un des codes de l'événement $(document).ready() renvoie à des objets DOM, il est possible que ces objets ne soient pas trouvés, et des erreurs Javascript peuvent se produire. Soit de la garde vos références à ces objets, ou reportez le code qui renvoie ces objets à la fenêtre.la charge de l'événement.

Je n'ai pas été en mesure de reproduire ce problème dans d'autres navigateurs (en particulier, Chrome et Firefox)

$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});

// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Événements

$(document).on('ready', handler) se lie à l'événement prêt de jQuery. Le handler est appelé lorsque le DOM est chargé . Des images comme sont peut-être toujours manquantes . Il ne sera jamais appelé si le document est prêt au moment de la liaison. jQuery utilise le DOMContentLoaded - événement pour cela, l'émuler si non disponible.

$(document).on('load', handler) est un événement qui sera déclenché lorsque toutes les ressources seront chargées à partir du serveur. Les Images sont maintenant chargées. Alors que onload est un événement HTML brut, ready est construit par jQuery.

fonctions

$(document).ready(handler) est en fait un promesse . Le gestionnaire sera appelé immédiatement si le document est prêt au moment de l'appel. sinon il se lie à l'événement ready .

avant jQuery 1.8 , $(document).load(handler) existait comme alias à $(document).on('load',handler) .

Lire La Suite

• Le moment
• Sur la fonction prêt
• un exemple
• promesses
• La retiré événement alias

le $(document).ready() est un événement jQuery qui se produit lorsque le document HTML a été entièrement chargé, tandis que l'événement window.onload se produit plus tard, lorsque tout y compris les images sur la page chargée.

aussi fenêtre.onload est un événement javascript pur dans le DOM, tandis que l'événement $(document).ready() est une méthode dans jQuery.

$(document).ready() est habituellement l'emballage de jQuery pour s'assurer que tous les éléments chargés à être utilisés dans jQuery...

regardez le code source de jQuery pour comprendre comment il fonctionne:

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {

        readyList = jQuery.Deferred();

        // Catch cases where $(document).ready() is called after the browser event has already occurred.
        // we once tried to use readyState "interactive" here, but it caused issues like the one
        // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed, false );

        // If IE event model is used
        } else {
            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", completed );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", completed );

            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;

            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}

            if ( top && top.doScroll ) {
                (function doScrollCheck() {
                    if ( !jQuery.isReady ) {

                        try {
                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }

                        // detach all dom ready events
                        detach();

                        // and execute any waiting functions
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
    // Add the callback
    jQuery.ready.promise().done( fn );

    return this;
};

J'ai aussi créé l'image ci-dessous comme une référence rapide pour les deux:

de la fenêtre.onload: un événement JavaScript normal.

document.prêt: un événement jQuery spécifique lorsque tout le HTML ont été chargés.

Document.ready (un événement jQuery) se déclenche lorsque tous les éléments sont en place, et ils peuvent être référencés dans le code JavaScript, mais le contenu n'est pas nécessairement chargé. Document.ready s'exécute lorsque le document HTML est chargé.

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

le window.load attendra cependant que la page soit entièrement chargée. Cela inclut les cadres intérieurs, les images, etc.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});

une chose à se rappeler (ou devrais-je dire se rappeler) est que vous ne pouvez pas empiler onload comme vous pouvez avec ready . En d'autres termes, jQuery magic permet plusieurs ready s sur la même page, mais vous ne pouvez pas faire cela avec onload .

Le dernier onload emportera sur toutes les précédentes onload .

une belle façon de traiter cela est avec une fonction apparemment écrite par un certain Simon Willison et décrite dans Utilisant Plusieurs Fonctions JavaScript Onload .

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* More code to run on page load */
});

le document.l'événement ready se produit lorsque le document HTML a été chargé, et l'événement window.onload se produit toujours plus tard, lorsque tout le contenu (images, etc.) a été chargé.

vous pouvez utiliser l'événement document.ready si vous voulez intervenir" tôt " dans le processus de rendu, sans attendre que les images se chargent. Si vous avez besoin que les images (ou tout autre "contenu") soient prêtes avant que votre script "fasse quelque chose", vous devez attendre jusqu'à window.onload .

par exemple, si vous implémentez un modèle de" diaporama", et que vous devez effectuer des calculs basés sur les tailles d'image, vous pouvez attendre jusqu'à window.onload . Sinon, vous risquez de rencontrer des problèmes aléatoires, selon la vitesse à laquelle les images seront chargées. Votre script s'exécute en même temps que le thread qui charge les images. Si votre script est assez long, ou si le serveur est assez rapide, vous pouvez ne pas remarquer de problème, si les images arrivent à temps. Mais le plus sûr la pratique serait de permettre aux images de se charger.

document.ready pourrait être un événement agréable pour vous de montrer un chargement"..."signe des utilisateurs, et sur window.onload , vous pouvez compléter les scripts des ressources nécessaires chargé, et puis enfin de supprimer le "Chargement..." signer.

exemples: -

// document ready events
$(document).ready(function(){
     alert("document is ready..");
})

// using JQuery
$(function(){
   alert("document is ready..");
})

// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;

window.onload est une fonction intégrée JavaScript. window.onload se déclenche lorsque la page HTML est chargée. window.onload peut être écrit qu'une seule fois.

document.ready est une fonction de la bibliothèque jQuery. document.ready déclenche quand HTML et tout le code JavaScript, CSS, et les images qui sont inclus dans le fichier HTML sont complètement chargés. document.ready peut être écrit plusieurs fois selon les besoins.

un petit conseil:

toujours utilisez le window.addEventListener pour ajouter un événement à window. Parce que de cette façon, vous pouvez exécuter le code dans différents gestionnaires d'événements .

code Correct:

window.addEventListener('load', function () {
  alert('Hello!')
})

window.addEventListener('load', function () {
  alert('Bye!')
})

code invalide:

window.onload = function () {
  alert('Hello!') // it will not work!!!
}

window.onload = function () {
  alert('Bye!') 
}

C'est parce que onload est juste propriété de l'objet, qui est remplacé.

quand vous dites $(document).ready(f) , vous dites à script engine de faire ce qui suit:

1. obtenir le document objet et le pousser, car il n'est pas dans la portée locale, il doit faire une recherche de table de hachage pour trouver où document est, heureusement document est globalement lié donc il s'agit d'une recherche simple.
2. trouver l'objet $ et le sélectionner, puisqu'il n'est pas de portée locale, il doit faire une recherche de table de hachage, qui peut ou non avoir des collisions.
3. trouve l'objet f dans la portée globale, qui est une autre recherche de table de hachage, ou l'objet de la fonction push et l'initialise.
4. appel ready de l'objet sélectionné, ce qui implique une autre table de hachage de recherche dans l'objet sélectionné à trouver la méthode et à l'appeler.
5. fait.

dans le meilleur des cas, il s'agit de 2 tables de hachage, mais cela ignore le travail lourd fait par jQuery, où $ est l'évier de cuisine de toutes les entrées possibles à jQuery, donc une autre carte est probablement là pour envoyer la requête au gestionnaire de correction.

alternativement, vous pouvez faire ceci:

window.onload = function() {...}

qui sera

1. trouver la fenêtre objet dans la portée globale, si le JavaScript est optimisé, il saura que depuis la fenêtre n'est pas changé, il a déjà l'objet sélectionné, donc rien ne doit être fait.
2. l'objet de fonction est poussé sur la pile de l'opérande.
3. vérifiez si onload est une propriété ou de ne pas en faire une table de hachage de recherche, puisqu'elle est, elle est appelée comme une fonction.

dans le meilleur des cas, cela coûte une recherche de table de hachage simple, qui est nécessaire parce que onload doit être récupéré.

idéalement, jQuery compilerait leurs requêtes sur des chaînes qui peuvent être collées pour faire ce que vous vouliez que jQuery fasse. mais sans l'expédition de jQuery. De cette façon, vous avez une option

1. faire l'expédition dynamique de jquery comme nous le faisons aujourd'hui.
2. demandez à jQuery de compiler votre requête en pure chaîne JavaScript qui peut être passée à eval pour faire ce que vous voulez.
3. Copiez le résultat de 2 directement dans votre code, et sautez le coût de eval .