非jquery的$(document).ready()等价于什么?


当前回答

在普通的JavaScript中,没有库?这是一个错误。$只是一个标识符,除非您定义它,否则它是没有定义的。

jQuery将$定义为它自己的“everything对象”(也称为jQuery,因此您可以在不与其他库冲突的情况下使用它)。如果你没有使用jQuery(或其他定义它的库),那么$将不会被定义。

或者你是在问在纯JavaScript中有什么等价的东西吗?这样的话,你可能需要window。onload并不是完全等价的,但它是在普通JavaScript中接近相同效果的最快最简单的方法。

其他回答

在最近的浏览器中最简单的方法是使用适当的GlobalEventHandlers, onDOMContentLoaded, onload, onloadeddata(…)

onDOMContentLoaded = (function(){console.log("DOM就绪!")})() onload = (function(){console.log("页面已加载完毕!")})() onlodeddata = (function(){console.log("数据已加载!")})()

当初始HTML文档完全加载和解析时,无需等待样式表、图像和子帧完成加载,就会触发DOMContentLoaded事件。应该只使用完全不同的事件加载来检测完全加载的页面。在更适合使用DOMContentLoaded的地方使用load是一个非常普遍的错误,所以要谨慎。

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

使用的函数是一个IIFE,在这种情况下非常有用,因为它在准备好时触发自己:

https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

显然,将它放在任何脚本的末尾更合适。

在ES6中,我们也可以把它写成一个箭头函数:

onload = (() => {console.log("ES6页面已完全加载!")})()

最好的方法是使用DOM元素,我们可以等待任何变量准备好,从而触发一个带箭头的IIFE。

行为将是相同的,但内存影响较小。

页脚 = (() => { console.log(“页脚加载!”)})() < div id = "脚注" >

主体onLoad也可以是一个替代方案:

<html>
<head><title>Body onLoad Exmaple</title>

<script type="text/javascript">
    function window_onload() {
        //do something
    }
</script>

</head>
<body onLoad="window_onload()">

</body>
</html>

这从ECMA完美地工作。这段代码是您所需要的全部内容,但如果您想挖掘更多内容并探索其他选项,请查看这段详细的解释。

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

窗外。onload不等于JQuery $(document)。因为$(document)。ready只等待DOM树while窗口。Onload检查所有元素,包括外部资产和图像。

编辑:由于Jan Derk的观察,添加了IE8和更老的版本。您可以在MDN上阅读此代码的源代码:

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Initialize your application or run some code.
    }
}

除了“互动性”,还有其他选择。详见MDN文档。

这没有回答问题,也没有显示任何非jquery代码。请看下面@ sospedra的回答。

$(document).ready()的优点是它在window.onload之前触发。load函数等待加载所有内容,包括外部资产和图像。美元(文档)。但是,当DOM树完成并且可以操作时,ready将被触发。如果你想在没有jQuery的情况下实现DOM,你可以查看这个库。有人从jQuery中提取了现成的部分。它又小又漂亮,你可能会发现它很有用:

domready at谷歌Code

在普通的JavaScript中,没有库?这是一个错误。$只是一个标识符,除非您定义它,否则它是没有定义的。

jQuery将$定义为它自己的“everything对象”(也称为jQuery,因此您可以在不与其他库冲突的情况下使用它)。如果你没有使用jQuery(或其他定义它的库),那么$将不会被定义。

或者你是在问在纯JavaScript中有什么等价的东西吗?这样的话,你可能需要window。onload并不是完全等价的,但它是在普通JavaScript中接近相同效果的最快最简单的方法。