Quelles sont les différences entre JavaScript window.onload et de jQuery $(document).ready() méthode ?
Le site ready se produit après le chargement du document HTML, tandis que l'événement onload se produit plus tard, lorsque tout le contenu (par exemple, les images) a également été chargé.
Le site onload est un événement standard dans le DOM, tandis que l'événement ready est spécifique à jQuery. Le but de l'événement ready est qu'il doit se produire le plus tôt possible après le chargement du document, afin que le code qui ajoute des fonctionnalités aux éléments de la page n'ait pas à attendre que tout le contenu soit chargé.
@baptx : Vous avez tort. Le site ready événement est spécifique à jQuery. Il utilise le DOMContentLoaded s'il est disponible dans le navigateur, sinon il l'émule. Il n'y a pas d'équivalent exact dans le DOM, car le paramètre DOMContentLoaded n'est pas pris en charge par tous les navigateurs.
Ok mais le même résultat existe avec DOMContentLoaded, peut-être auriez-vous dû spécifier ceci
@baptx : Je ne pensais pas que c'était pertinent pour la question, et je ne le pense toujours pas.
window.onload est l'événement JavaScript intégré, mais comme son implémentation avait subtile les bizarreries des différents navigateurs (Firefox, Internet Explorer 6, Internet Explorer 8, et Opéra ), jQuery fournit document.ready qui fait abstraction de ces éléments et se déclenche dès que le DOM de la page est prêt (il n'attend pas les images, etc.).
$(document).ready (notez que c'est pas document.ready (qui n'est pas défini) est une fonction jQuery, qui enveloppe et fournit les éléments suivants cohérence aux événements suivants :
document.ondomcontentready / document.ondomcontentloaded - un nouvel événement qui se déclenche lorsque le DOM du document est chargé (ce qui peut prendre un certain temps). avant les images, etc., sont chargées) ; là encore, la situation est légèrement différente dans Internet Explorer et dans le reste du monde.window.onload (qui est implémenté même dans les anciens navigateurs), qui se déclenche lorsque la page entière se charge (images, styles, etc.).
Il y a un léger malentendu à ce sujet : la load événement de window est mis en œuvre de manière raisonnablement cohérente dans tous les navigateurs. Le problème que jQuery et d'autres bibliothèques tentent de résoudre est celui que vous avez mentionné, à savoir que l'option load n'est pas déclenché tant que toutes les ressources dépendantes, telles que les images et les feuilles de style, n'ont pas été chargées, ce qui peut prendre beaucoup de temps après que le DOM ait été complètement chargé, rendu et prêt pour l'interaction. L'événement qui se déclenche dans la plupart des navigateurs lorsque le DOM est prêt est appelé DOMContentLoaded pas DOMContentReady .
@Tim Down : raisonnablement est le mot clé ici ; au moins un reniflage d'objet était nécessaire, même avec onload (il existe des différences par rapport à FF/IE/Opera). En ce qui concerne le DOMContentLoaded vous avez tout à fait raison. Je l'ai modifié pour le clarifier.
$(document).ready() est un événement jQuery. L'événement de JQuery $(document).ready() est appelée dès que le DOM est prêt (ce qui signifie que le navigateur a analysé le HTML et construit l'arbre DOM). Cela vous permet d'exécuter du code dès que le document est prêt à être manipulé.
Par exemple, si un navigateur prend en charge l'événement DOMContentLoaded (comme c'est le cas pour de nombreux navigateurs autres que IE), il se déclenchera sur cet événement. (Notez que l'événement DOMContentLoaded n'a été ajouté à IE que dans IE9+).
Deux syntaxes peuvent être utilisées pour cela :
$( document ).ready(function() {
console.log( "ready!" );
});Ou la version abrégée :
$(function() {
console.log( "ready!" );
});Principaux points pour $(document).ready() :
$ avec jQuery lorsque vous recevez le message "$ n'est pas défini".$(window).load() à la place.window.onload() est une fonction native de JavaScript. Le site window.onload() se déclenche lorsque tout le contenu de votre page est chargé, y compris le DOM (document object model), les bannières publicitaires et les images. Une autre différence entre les deux est que, alors que nous pouvons avoir plus d'un événement $(document).ready() on ne peut avoir qu'une seule onload fonction.
Un point mineur : La discussion sur IE est mal formulée. Ce n'est pas que IE (8 et antérieurs) "ne peut pas tirer en toute sécurité" jusqu'à ce que le readyState du document soit complet, c'est qu'IE manquait un événement DOMContentLoaded. Ce n'est pas une question de "sécurité", mais une fonctionnalité manquante dans IE, ajoutée dans IE 9.
Vous dites "Il n'attendra pas que les images soient chargées." qu'en est-il des autres fichiers, js le plus important ? Souvent, avant d'appeler la fonction d'un autre fichier, j'ai besoin de savoir s'il est chargé.
A Chargement de Windows se déclenche lorsque tout le contenu de votre page est entièrement chargé, y compris le contenu du DOM (modèle d'objet de document) et le contenu de la page. JavaScript asynchrone , cadres et images . Vous pouvez également utiliser body onload=. Les deux sont identiques ; window.onload = function(){} et <body onload="func();"> sont des façons différentes d'utiliser le même événement.
jQuery $document.ready L'événement de la fonction s'exécute un peu plus tôt que window.onload et est appelé une fois que le DOM (Document object model) est chargé sur votre page. Il n'attendra pas que le images, cadres pour obtenir un chargement complet .
Tiré de l'article suivant : comment $document.ready() est différent de window.onload()
Un mot d'avertissement sur l'utilisation $(document).ready() avec Internet Explorer. Si une requête HTTP est interrompue avant le document entier est chargé (par exemple, alors qu'une page est en train d'être transmise au navigateur, un autre lien est cliqué) IE déclenchera la fonction $(document).ready événement.
Si un code dans le $(document).ready() fait référence à des objets du DOM, il est possible que ces objets ne soient pas trouvés et que des erreurs Javascript se produisent. Protégez vos références à ces objets ou reportez le code qui fait référence à ces objets à l'événement window.load.
Je n'ai pas été en mesure de reproduire ce problème dans d'autres navigateurs (notamment Chrome et Firefox).
Quelle version d'IE ? Je sais que je devrais me soucier de la compatibilité, mais c'est difficile avec IE. Est-il acceptable d'utiliser document.ready uniquement pour JavaScript ?
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
2 votes
Duplicata possible de équivalent de $(document).ready sans jQuery
7 votes
La plupart des réponses ici sont dépassées. La manière dont jQuery implémente actuellement
$().ready()le fait tirer aprèswindow.onloadpar moments.2 votes
Remarques :
$(window).on('load', function(){});est l'équivalent de jQuery pour window.onload