快速提示：用纯JavaScript替换jQuery的Ready（）

您所在的位置：网站首页 › jquery的ready事件 › 快速提示：用纯JavaScript替换jQuery的Ready（）

快速提示：用纯JavaScript替换jQuery的Ready（）

2024-07-16 02:33| 来源: 网络整理| 查看: 265

Mev-Rael和Tim Severien对本文进行了同行评审。感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！

jQuery中实现了ready方法，以便在DOM完全加载后执行代码。由于当所有DOM元素都可用时，它会执行给定的功能，因此可以确保尝试访问或操作元素将起作用。

在jQuery 3.0之前，匿名函数的典型用法如下所示：

$(document).ready(function() { // Handler for .ready() called. }); jQuery 3.0 ready（）更改

在版本3发行之前，有几种方法可以调用ready方法：

在document元素上： $(document).ready(handler); 在一个空元素上： $().ready(handler); 或直接（即不在特定元素上）： $(handler);

所有上述命名的变体在功能上都是等效的。 DOM完全加载时，无论调用哪个元素，都将调用指定的处理程序。换句话说，在图像元素$("img")与document元素上调用它并不表示在加载指定元素时触发了回调。而是在整个DOM完全加载后将调用它。

在jQuery 3.0中，除$(handler);以外的所有其他语法方法$(handler); 不推荐使用。官方理由是：

这是因为选择与.ready()方法的行为无关，这是无效的，并且可能导致对该方法的行为做出错误的假设。

准备事件和加载事件之间的区别

当DOM完全加载且元素访问安全时，将触发ready事件。另一方面，在DOM和所有资产都已加载之后，就会触发load事件。

加载事件可以按如下方式使用：

$(window).on("load", function(){ // Handler when all assets (including images) are loaded });

这不仅等待DOM准备好进行交互，而且还等待图像完全加载（这可能需要一些时间，具体取决于图像大小）。

对于普通的DOM操作，您可能不需要load事件，但是，例如，如果您想在所有资产加载之前显示一个加载微调器，或者如果您想进行一些计算，则这可能是正确的选择与图像大小。

您可能不需要jQuery.ready（）

ready方法可确保仅在安全操作所有DOM元素时才执行代码。但是，这是什么意思？当您在HTML文档的部分中执行JavaScript代码时，这将确保在浏览器也加载了以下所有元素（例如元素）时也将执行代码：

.ready() tutorial $(function(){ // .ready() callback, is only executed when the DOM is fully loaded var length = $("p").length; // The following will log 1 to the console, as the paragraph exists. // This is the evidence that this method is only called when the // DOM is fully loaded console.log(length); });

I'm the content of this website

如果您将JavaScript作为内部的最后一件事执行，则可能不需要将其包装在ready() ，因为您可能尝试操作或访问的所有元素都已加载：

.ready() tutorial

I'm the content of this website

var length = $("p").length; // The following will log 1 to the console, as the paragraph exists. console.log(length); 纯JavaScript ready（）替代

对于现代浏览器和IE9 +，您可以侦听DOMContentLoaded事件：

document.addEventListener("DOMContentLoaded", function(){ // Handler when the DOM is fully loaded });

但是请注意，如果事件已触发，则将不执行回调。为了确保回调始终运行，jQuery检查文档（ reference ）的readyState ，如果已经complete ，则立即执行回调：

您还可以包括已经实现此解决方案的domReady库。

旧版本的Internet Explorer

对于小于或等于8的IE版本，您可以使用onreadystatechange事件来检测文档的readyState ：

document.attachEvent("onreadystatechange", function(){ // check if the DOM is fully loaded if(document.readyState === "complete"){ // remove the listener, to make sure it isn't fired in future document.detachEvent("onreadystatechange", arguments.callee); // The actual handler... } });

另外，您可以像jQuery一样使用load事件，因为它可以在任何浏览器中使用。这也会导致时间延迟，因为它将等待所有资产加载。请注意，如上所述，您还必须在此解决方案中检查readyState ，以确保即使事件已经触发，回调仍将执行。

结论

如果要为ready方法寻找普通JavaScript替代方法，则可以继续执行DOMContentLoaded事件。如果您的系统要求包括IE

【本文地址】

快速提示：用纯JavaScript替换jQuery的Ready（）

快速提示：用纯JavaScript替换jQuery的Ready（）

今日新闻

推荐新闻