什么是非jQuery等效项$(document).ready()？
$ {document）.ready（）的非jQuery等效项是什么？
在最近的浏览器中，最简单的方法是使用适当的GlobalEventHandlers，onDOMContentLoaded，onload，onloadeddata（...）
onDOMContentLoaded = (function(){ console.log("DOM ready!") })()
onload = (function(){ console.log("Page fully loaded!") })()
onloadeddata = (function(){ console.log("Data loaded!") })()当初始HTML文档已完全加载和解析时，无需等待样式表，图像和子帧完成加载，就会触发DOMContentLoaded事件。完全不同的事件加载应仅用于检测页面已满。在DOMContentLoaded更合适的地方使用负载是一个非常普遍的错误，因此要谨慎。
https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded
使用的函数是IIFE，在这种情况下非常有用，因为它在准备就绪时会触发自身：
https://zh.wikipedia.org/wiki/立即调用功能_表达式
将它放在所有脚本的末尾显然更合适。
在ES6中，我们还可以将其编写为箭头函数：
onload = (() => { console.log("ES6 page fully loaded!") })()最好是使用DOM元素，我们可以等待触发箭头IIFE的任何变量准备就绪。
行为将相同，但对内存的影响较小。
footer = (() => { console.log("Footer loaded!") })()<div id="footer">在许多情况下，至少在我的浏览器中，文档对象也会在就绪时触发。语法非常好，但是需要进一步测试兼容性。
document=(()=>{ /*Ready*/ })()
正文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>
超过90％的浏览器都支持DOMContentLoaded，这是一个基于标准的替代品，但IE8不支持（所以下面的代码被JQuery用于浏览器支持）：
document.addEventListener("DOMContentLoaded", function(event) {
//do work
});
jQuery的本机功能比window.onload复杂得多，如下所示。
function bindReady(){
if ( readyBound ) return;
readyBound = true;
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
jQuery.ready();
}, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", arguments.callee );
jQuery.ready();
}
});
// If IE and not an iframe
// continually check to see if the document is ready
if ( document.documentElement.doScroll && window == window.top ) (function(){
if ( jQuery.isReady ) return;
try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
}
// A fallback to window.onload, that will always work
jQuery.event.add( window, "load", jQuery.ready );
}
从ECMA上可以完美运行
document.addEventListener("DOMContentLoaded", function() {
// code...
});
之所以window.onload不等于JQuery，$(document).ready是因为$(document).ready在window.onload检查所有元素（包括外部资产和图像）时仅等待DOM树。
编辑：添加了IE8和更旧的等效版本，这要感谢Jan Derk的观察。您可以通过以下链接在MDN 上阅读此代码的源代码：
// alternative to DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
// Initialize your application or run some code.
}
}
除了以外，还有其他选择"interactive"。有关详细信息，请参见MDN链接。
我整理了一点
domready.js
(function(exports, d) {
function domReady(fn, context) {
function onReady(event) {
d.removeEventListener("DOMContentLoaded", onReady);
fn.call(context || exports, event);
}
function onReadyIe(event) {
if (d.readyState === "complete") {
d.detachEvent("onreadystatechange", onReadyIe);
fn.call(context || exports, event);
}
}
d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) ||
d.attachEvent && d.attachEvent("onreadystatechange", onReadyIe);
}
exports.domReady = domReady;
})(window, document);
如何使用它
<script src="domready.js"></script>
<script>
domReady(function(event) {
alert("dom is ready!");
});
</script>
您还可以通过传递第二个参数来更改回调运行的上下文
function init(event) {
alert("check the console");
this.log(event);
}
domReady(init, console);
有趣的$(document).ready()是，它可以在之前触发window.onload。加载功能会一直等到所有内容加载完毕，包括外部资源和图像。$(document).ready但是，当DOM树完成并且可以进行操作时会触发。如果您想在没有jQuery的情况下实现DOM就绪，则可以签入此库。有人ready从jQuery中提取了一部分。它的大小不一，您可能会发现它很有用：
在普通的JavaScript中，没有库？这是一个错误。
$只是一个标识符，除非您定义它，否则是未定义的。jQuery将
$其定义为自己的“所有对象”（也称为，jQuery因此您可以在不与其他库冲突的情况下使用它）。如果您不使用jQuery（或其他定义它的库），则$不会被定义。还是您在问普通JavaScript中的等效词是什么？在这种情况下，您可能想要
window.onload，它并不完全等效，但是是在原始JavaScript中接近相同效果的最快，最简单的方法。