web-dev-qa-db-fra.com

Différence entre onload () et $ .ready?

Pouvez-vous énumérer la différence entre les fonctions onload() et $(document).ready(function(){..}) dans l'utilisation de jQuery? 

javascriptjqueryonload
51
Venkat

l'événement load (a.k.a "onload") sur l'élément window et/ou body sera déclenché une fois all le contenu de la page a été chargé - cela inclut toutes les images, scripts, etc.

En revanche, la fonction $(document).ready(...) de jquery utilisera un mécanisme spécifique au navigateur pour s'assurer que votre gestionnaire est appelé dès que possible après le chargement et l'accès du dom HTML/XML. Il s'agit du point le plus ancien du processus de chargement de page où vous pouvez exécuter en toute sécurité un script destiné à accéder aux éléments du nom html de la page. Ce point arrive plus tôt (souvent beaucoup plus tôt) que l'événement final load, en raison du temps supplémentaire requis pour charger des ressources secondaires (telles que des images, etc.).

70
Lee

Les principales différences entre les deux sont les suivantes:

  1. L'événement Body.Onload () sera appelé uniquement après le chargement du DOM et des ressources associées, telles que des images, mais l'événement document.ready () de jQuery sera appelé une fois le DOM chargé, c'est-à-dire qu'il n'attendra pas le chargement des ressources telles que des images . Par conséquent, les fonctions de l'événement ready de jQuery seront exécutées une fois la structure HTML chargée sans attendre les ressources.
  2. Nous pouvons avoir plusieurs document.ready () dans une page, mais l'événement Body.Onload () ne le peut pas.
18
Bhanu Prakash Pandey

La fonction Document.ready () se déclenche dès que HTML DOM est chargé. Mais la fonction onload () se déclenche après HTML DOM, tout le contenu du corps comme des images chargées.

2
user5755278

body.onload () se préoccupe à la fois de la structure HTML et des ressources associées alors que document.ready () se soucie uniquement de la structure HTML.

1
sridiva

onload () se déclenche lorsque tout le contenu (tout) de l'élément ciblé est entièrement chargé, comme les CSS, les images, etc.

$ .ready indique que le code qu'il contient doit être exécuté une fois le contenu des éléments ciblés chargé et prêt à être manipulé par script. Il n'attendra pas que les images se chargent pour exécuter le script jQuery.

.

Ex (corps en charge):

<body onload="loadBody()">

<script>
function myFunction() {
    alert("Page is loaded");
}
</script>
</body

Ex (sur un élément):

<img src="w3html.gif" onload="loadImg()" width="100" height="132">

<script>
function loadImg() {
    alert("Image is loaded");
}
</script>

Ex3 ($ .ready):

<script type = "text/javascript">
        $(document).ready(function() {
            alert("$(document).ready fired");
        });
    </script>
0
Srikrushna Pal

Onload s'occupe du DOM et des ressources: il vérifie si les images sont chargées, les scripts sont prêts à être exécutés et bien plus encore.

$ .ready vérifie simplement si nous avons lu le DOM complet de la page.

Veuillez consulter ce lien pour plus d'explications et d'exemples: http://dailygit.com/difference-between-document-ready-and-window-load-in-jquery/

0
Daniele Petrarolo