Remplacez la fonction Ready Document JQuery par JavaScript-js tutoriel-php.cn

Remplacez la fonction Ready Document JQuery par JavaScript

Lisa Kudrow

Libérer： 2025-02-17 09:56:10

original

439 Les gens l'ont consulté

Replace the jQuery Document Ready Function with JavaScript

La méthode

jQuery's $(document).ready() est utilisée pour exécuter du code une fois le DOM entièrement chargé. Puisqu'il exécute la fonction donnée lorsque tous les éléments DOM sont disponibles, il garantit que les tentatives d'accéder ou de fonctionner correctement sur l'élément fonctionnent correctement.

Avant JQuery 3.0, l'utilisation typique de l'utilisation des fonctions anonymes est la suivante:

$(document).ready(function() {
  // .ready() 的处理程序被调用。
});

Copier après la connexion

points clés

jQuery de JQuery garantit que le code n'est exécuté que lorsque tous les éléments DOM sont sûrs et exploitables, mais ont été considérablement modifiés dans JQuery 3.0 et que toutes les méthodes de syntaxe (sauf document.ready) sont obsolètes. $(handler);
Les événements sont des alternatives JavaScript pures aux méthodes DOMContentLoaded qui peuvent être utilisées dans les navigateurs modernes et IE9. Pour les versions plus anciennes de IE, l'événement jQuery ready peut être utilisé. onreadystatechange
pour vous assurer que le DOM se charge. </body>

modifie

dans jQuery 3.0 `ready()`

Avant la publication de la version 3.0, vous pouvez appeler la méthode

de plusieurs manières: ready

$(document).ready(handler);
$().ready(handler);
$(handler);

Toutes les variantes ci-dessus sont fonctionnellement équivalentes. Quel que soit l'élément appelé, le gestionnaire spécifié sera appelé tant que le DOM sera complètement chargé. En d'autres termes, l'appeler sur un élément d'image

n'est pas différent de l'appeler sur un élément de document, et le temps de déclenchement de la fonction de rappel n'a rien à voir avec le chargement de l'élément spécifié. Au lieu de cela, il sera appelé après que l'ensemble du Dom sera complètement chargé. $("img")

Dans jQuery 3.0, toutes les autres méthodes de syntaxe sauf

sont obsolètes. La raison officielle est: $(handler);

C'est parce que le choix n'a rien à voir avec le comportement de la méthode
, qui est inefficace et peut conduire à de fausses hypothèses sur le comportement de la méthode. .ready()

Différence entre un événement et un `ready` `load`

Les événements tirent lorsque le DOM est entièrement chargé et que les éléments sont accessibles en toute sécurité. D'un autre côté, l'événement

se déclenche après le chargement du DOM et toutes les ressources. ready load

Les événements peuvent être utilisés comme suit:

load

Cela attend non seulement que le Dom soit prêt pour l'interaction, mais attend également que l'image se charge complètement (cela peut prendre un certain temps en fonction de la taille de l'image).

$(window).on("load", function(){
  // 所有资源（包括图像）加载完毕时的处理程序
});

Copier après la connexion

Pour les opérations DOM normales, vous n'avez peut-être pas besoin de l'événement

, mais si vous souhaitez afficher un spinner de chargement avant le chargement de toutes les ressources, ou si vous voulez faire des calculs avec la taille de l'image, ce peut être le bon choix .

Vous n'avez peut-être pas besoin de jQuery.ready ()

La méthode

ready garantit que le code n'est exécuté que lorsque tous les éléments DOM sont sûrs et exploitables. Mais qu'est-ce que cela signifie? Lorsque vous exécutez le code JavaScript dans la partie <body> du document HTML, cela garantira que le code est exécuté après que le navigateur charge également tous les éléments suivants (par exemple, <code><p> éléments):

$(document).ready(function() {
  // .ready() 的处理程序被调用。
});

Copier après la connexion

Si vous exécutez le code JavaScript comme la dernière chose dans <body>, vous n'avez probablement pas besoin de l'envelopper dans ready() parce que tous les éléments que vous pouvez essayer de fonctionner ou d'accéder sont chargés:

$(window).on("load", function(){
  // 所有资源（包括图像）加载完毕时的处理程序
});

Copier après la connexion

pur javascript `ready()` alternatives

Pour les navigateurs modernes et IE9, vous pouvez écouter DOMContentLoaded événements:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>.ready() 教程</title>
  <🎜>
</head>
<body>
  <🎜>
  <p>我是这个网站的内容</p>
</body>
</html>

Copier après la connexion

Cependant, notez que si l'événement a été licencié, la fonction de rappel ne sera pas exécutée. Pour s'assurer que la fonction de rappel est toujours exécutée, jQuery vérifie le document readyState (référence) et exécute la fonction de rappel immédiatement si elle a été terminée:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>.ready() 教程</title>
</head>
<body>
  <p>我是这个网站的内容</p>
  <🎜>
  <🎜>
</body>
</html>

Copier après la connexion

Vous pouvez également inclure la bibliothèque DomReady, qui implémente déjà cette solution.

ancienne version d'Internet Explorer

Pour les versions IE inférieures ou égales à 8, vous pouvez utiliser l'événement onreadystatechange pour détecter le document readyState:

document.addEventListener("DOMContentLoaded", function(){
  // DOM 完全加载时的处理程序
});

Copier après la connexion

ou, vous pouvez utiliser l'événement load comme jQuery, car cela fonctionnera dans n'importe quel navigateur. Cela entraîne également des retards, car il attendra que toutes les ressources se chargent. Notez que vous devez également vérifier readyState comme expliqué ci-dessus pour vous assurer que la fonction de rappel sera toujours exécutée même si l'événement a été licencié.

Conclusion

Si vous recherchez une alternative JavaScript pure à la méthode ready, vous pouvez utiliser l'événement DOMContentLoaded. Si les exigences de votre système incluent IE, vous devrez peut-être utiliser des événements onreadystatechange ou load.

Si vous utilisez jQuery dans votre projet, vous pouvez continuer en toute sécurité à utiliser la fonction document.ready de JQuery, mais n'oubliez pas d'éviter d'utiliser (déprécié) les méthodes ready() sur les éléments comme mentionné précédemment (par exemple $(document).ready()).

Enfin, n'oubliez pas que dans de nombreux cas, vous n'avez peut-être besoin de aucune de ces solutions - déplacez simplement votre code JavaScript vers la balise finale

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!