纯JavaScript等效于jQuery的$ .ready（）-如何在页面/ DOM准备就绪时调用函数[重复]

Pro小卤蛋2020-03-09

好的，这可能只是一个愚蠢的问题，尽管我敢肯定会有很多其他人不时问同样的问题。我，我只是想以任何一种方式100％确定它。有了jQuery，我们都知道精彩之处

$('document').ready(function(){});

但是，假设我要运行一个用标准JavaScript编写且没有库支持的函数，并且我想在页面准备就绪后立即启动一个函数。解决这个问题的正确方法是什么？

我知道我可以做：

window.onload="myFunction()";

...或者我可以使用body标记：

<body onload="myFunction()">

...或者我什至可以尝试在页面底部输入所有内容，但结尾body或html标记类似：

<script type="text/javascript">
   myFunction();
</script>

什么是跨浏览器（旧/新）兼容方法以jQuery的方式发布一个或多个函数$.ready()？

逆天2020/03/09 21:41:33

document.ondomcontentready=function(){} 应该可以解决问题，但是它不具有完全的浏览器兼容性。

似乎您应该只使用jQuery min

西门卡卡西2020/03/09 21:41:33

您的方法（将脚本放在结束body标签之前）

<script>
   myFunction()
</script>
</body>
</html>

是支持新旧浏览器的可靠方法。

猴子Sam宝儿2020/03/09 21:41:33

我不太确定您要问什么，但这也许可以帮助您：

window.onload = function(){
    // Code. . .

}

要么：

window.onload = main;

function main(){
    // Code. . .

}

斯丁Sam斯丁2020/03/09 21:41:33

如果要使用不带jQuery的VANILLA纯JavaScript，则必须使用（Internet Explorer 9或更高版本）：

document.addEventListener("DOMContentLoaded", function(event) {
    // Your code to run since DOM is loaded and ready
});

以上相当于jQuery .ready：

$(document).ready(function() {
    console.log("Ready!");
});

哪个还可以像这样简短地编写，哪个jQuery将在ready甚至发生后运行。

$(function() {
    console.log("ready!");
});

不要与以下混淆（这并不意味着要准备DOM）：

请勿使用这种会自行执行的IIFE：

 Example:

(function() {
   // Your page initialization code here  - WRONG
   // The DOM will be available here   - WRONG
})();

该IIFE不会等待您的DOM加载。（我什至在谈论最新版本的Chrome浏览器！）

Newest Answer