我有一个使用$（document）.ready的脚本，但它不使用jQuery中的任何其他内容。我想通过删除jQuery依赖项来减轻它。
如何在不使用jQuery的情况下实现我自己的$（document）.ready功能？我知道，使用window.onload将不同，因为window.onlead在加载所有图像、帧等后启动。
当前回答
三个选项：
如果script是主体的最后一个标记，则DOM将在脚本标记执行之前准备就绪当DOM就绪时，“readyState”将变为“complete”将所有内容置于“DOMContentLoaded”事件侦听器下
在准备状态更改时
document.onreadystatechange = function () {
if (document.readyState == "complete") {
// document is ready. Do your stuff here
}
}
来源：MDN
DOMContentLoaded（DOM内容已加载）
document.addEventListener('DOMContentLoaded', function() {
console.log('document is ready. I can sleep now');
});
关注石器时代的浏览器：转到jQuery源代码并使用ready函数。在这种情况下，您不是在解析和执行整个库，您只是在做其中的一小部分。
其他回答
我们发现了一个快速而肮脏的跨浏览器实现，它可以用最少的实现实现大多数简单情况：
window.onReady = function onReady(fn){
document.body ? fn() : setTimeout(function(){ onReady(fn);},50);
};
现在你应该使用模块。将代码放入模块的默认函数中，并将该函数导入脚本元素。
客户端.js：
export default function ()
{
alert ("test");
}
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script type="module">
import main from './client.js';
main ();
</script>
</body>
</html>
jQuery的回答对我很有用。经过一点重构，它很好地满足了我的需求。我希望这对其他人有所帮助。
function onReady ( callback ){
var addListener = document.addEventListener || document.attachEvent,
removeListener = document.removeEventListener || document.detachEvent
eventName = document.addEventListener ? "DOMContentLoaded" : "onreadystatechange"
addListener.call(document, eventName, function(){
removeListener( eventName, arguments.callee, false )
callback()
}, false )
}
一旦DOM就绪，此跨浏览器代码将调用函数：
var domReady=function(func){
var scriptText='('+func+')();';
var scriptElement=document.createElement('script');
scriptElement.innerText=scriptText;
document.body.appendChild(scriptElement);
};
以下是它的工作原理：
domReady的第一行调用函数的toString方法，以获取传入函数的字符串表示形式，并将其包装在立即调用该函数的表达式中。domReady的其余部分使用表达式创建一个脚本元素，并将其附加到文档正文中。DOM就绪后，浏览器运行附加到主体的脚本标记。
例如，如果您这样做：domReady（function（）｛alert（）；｝）；，以下内容将附加到body元素：
<script>(function (){alert();})();</script>
注意，这只适用于用户定义的函数。以下命令不起作用：domReady（警报）；
如果您正在加载BODY底部附近的jQuery，但在编写jQuery（<func>）或jQuery（document）.ready（<func>）时遇到问题，请在Github上查看jqShim。
与其重新创建自己的文档就绪函数，它只需保留这些函数，直到jQuery可用，然后按预期继续jQuery。将jQuery移动到主体底部的目的是加快页面加载速度，您仍然可以通过在模板头部内联jqShim.min.js来实现这一点。
最后我写了这段代码，将WordPress中的所有脚本都移到了页脚，而现在只有这段填充码直接位于页眉中。
