La différence entre jquery $(document).ready() et window.onload-js tutoriel-php.cn

La fonction de $(

document).ready() dans Jquery est similaire à la méthode window.onload dans le JavaScript traditionnel, mais elle est différent de la méthode window.onload Il y a encore une différence.

1. Temps d'exécution

window.onload doit attendre que tous les éléments de la page, y compris les images, soient chargés avant de pouvoir être exécuté.
$(document).ready() est exécuté après le dessin de la structure DOM, sans attendre son chargement.

2. Écrivez des nombres différents

Vous ne pouvez pas écrire plusieurs méthodes window.onload en même temps. S'il existe plusieurs méthodes window.onload, une seule sera exécutée.
$ (document) .Ready () peut être écrit en même temps, et peut être exécuté

3. Écriture simplifiée

Window.onload (document .ready(function(){}) peut être abrégé en $(function(){});

Dans mon développement précédent, j'utilisais généralement javascript, et j'ai toujours utilisé le mode jquery. , la plupart du temps, la première ligne est :

Le code est le suivant :

$(document).ready(function(){

...
} ) ;

Pour le moment, vous n'avez pas besoin d'attendre que tous les js et images soient chargés avant de pouvoir exécuter certaines méthodes. Cependant, parfois, vous devez attendre que tous

éléments à charger. , uniquement lorsque certaines méthodes peuvent être exécutées, par exemple, certaines images ou d'autres aspects n'ont pas été chargés à ce moment, cliquer sur certains boutons entraînera des situations inattendues.

doit être utilisé Allez sur :

Le code est le suivant :

$(window).load(function() {

$("#btn-upload" .click(function(){ //Par exemple, Said :

uploadPhotos();
});
});

Ce qui suit est le contenu reproduit,

utilisez $(window).load(function() {...}) au lieu de body.onload()

Tout d'abord, ce sont toutes des images dans tous les éléments de la page (y compris
balises html
et références , Flash et autres médias) sont exécutés après chargement, c'est ce qu'ils ont en commun Ne pas utiliser body.Onload() Raison 1 :

Si nous voulons charger plusieurs fonctions en même temps, nous devons écrire comme ceci

. Si nous utilisons $(window).load() nous pouvons en charger plusieurs comme ceci. Le code de la fonction

est le suivant :

$(window).load(function() {

alert("bonjour, je suis jQuery!"); > $(window).load(function() {

alert("bonjour, je suis aussi jQuery");
});

Écrit comme ceci, il sera exécuté de haut en bas. Ces deux fonctions sont beaucoup plus belles

Raison 2 pour ne pas utiliser body.Onload() :

Utiliser body. .Onload() ne peut pas séparer complètement js et html. C'est un problème très grave

De plus, l'utilisation de $(window).load(function(){...}) et body.onload(. ) a le même problème, car comme mentionné au début, ils doivent attendre que tout le contenu de la page

soit chargé avant de s'exécuter. Cependant, si la vitesse du réseau est relativement lente, cela prend souvent un certain temps. beaucoup de temps pour charger une page (allant de quelques secondes à plus de dix secondes, voire plus...), nous

rencontrons donc souvent des situations où la page n'a pas été entièrement chargée mais l'utilisateur exploite déjà la page, donc l'effet affiché par la page est différent de ce à quoi nous nous attendions

Je recommande donc ici d'utiliser $(document).ready(function(){}), ou abrégé en $(. function(){}), car il sera chargé après le chargement de l'élément dom de la page,

sans attendre le téléchargement des images ou autres médias

Mais parfois nous. nous devons attendre que tout sur la page soit chargé avant d'exécuter la fonction que nous voulons exécuter, il s'agit donc de savoir s'il faut utiliser $(window).load(function(){...}) ou

Que ce soit utiliser $(function(){}) nécessite souvent des choix différents en fonction de besoins spécifiques.

Enfin, attachez un morceau de code jQuery qui est exécuté avant que tous les éléments DOM ne soient chargés

Le code est la suivante :

Derniers articles par auteur