我有一个使用$（document）.ready的脚本，但它不使用jQuery中的任何其他内容。我想通过删除jQuery依赖项来减轻它。
如何在不使用jQuery的情况下实现我自己的$（document）.ready功能？我知道，使用window.onload将不同，因为window.onlead在加载所有图像、帧等后启动。
当前回答
我们发现了一个快速而肮脏的跨浏览器实现，它可以用最少的实现实现大多数简单情况：
window.onReady = function onReady(fn){
document.body ? fn() : setTimeout(function(){ onReady(fn);},50);
};
其他回答
此处提供的setTimeout/setInterval解决方案仅在特定情况下有效。
该问题在旧版本的Internet Explorer（最高8版）中尤为突出。
影响这些setTimeout/setInterval解决方案成功的变量有：
1) dynamic or static HTML
2) cached or non cached requests
3) size of the complete HTML document
4) chunked or non chunked transfer encoding
解决此特定问题的原始（原生Javascript）代码如下：
https://github.com/dperini/ContentLoaded
http://javascript.nwbox.com/ContentLoaded (test)
这是jQuery团队构建其实现的代码。
比较
这里（在下面的片段中）是所选择的可用浏览器“内置”方法及其执行顺序的比较。评论
任何现代浏览器都不支持document.onload（X）（从不触发事件）如果您使用<body onload=“bodyOnLoad（）”>（F），同时使用window.onload（E），则只执行第一个（因为它会覆盖第二个）<body onload=“…”>（F）中给定的事件处理程序由附加的onload函数包装document.onreadystatechange（D）不覆盖document.addEventListener（'readystatechange'…）（C）可能是因为类似XYZevent的方法独立于addEventListener队列（允许添加多个侦听器）。在执行这两个处理程序之间可能不会发生任何事情。所有脚本都在控制台中写入时间戳，但也可以访问div的脚本也在主体中写入时间标记（在脚本执行后单击“FullPage”链接查看）。解决方案readystatechange（C，D）由浏览器执行多次，但针对不同的文档状态：loading-文档正在加载（没有在代码段中激发）交互式-文档在DOMContentLoaded之前被解析和激发完成-加载文档和资源，在加载body/window之前激发
<html><head><脚本>//溶液Aconsole.log（`[timestamp:${Date.now（）}]A:Head脚本`）；//溶液Bdocument.addEventListener（“DOMContentLoaded”，（）=>{print（`[时间戳：${Date.now（）}]B:DOMContentLoaded`）；});//溶液Cdocument.addEventListener（'readystatechange'，（）=>{print（`[时间戳：${Date.now（）}]C:就绪状态：${document.ReadyState}`）；});//溶液Ddocument.onreadystatechange=s=>{print（`[时间戳：${Date.now（）}]D:document.onrreadystatechange就绪状态：${document.ReadyState}`）}；//解决方案E（从未执行）window.onload=（）=>{print（`E:<body onload=“…”>覆盖此处理程序`）；};//溶液F函数体OnLoad（）{print（`[timestamp:${Date.now（）}]F:<body onload='…'>`）；infoAboutOnLoad（）；//其他信息}//溶液Xdocument.onload=（）=>｛print（“document.onlead从未启动”）｝；//助手函数打印（txt）｛console.log（txt）；如果（mydiv）mydiv.innerHTML+=txt.replace（'<'，'<；'）.replace（'>'，'>；'）+'<br>'；}函数infoAboutOnLoad（）{console.log（“window.onload（重写后）：”，（“”+document.body.onload）.replace（/\s+/g，“”））；console.log（`body.onload==window.onload-->${document.body.onload==window.onload}`）；}console.log（“window.onload（覆盖前）：”，（“”+document.body.onload）.replace（/\s+/g，“”））；</script></head><body onload=“bodyOnLoad（）”><div id=“mydiv”></div><!-- 此脚本必须位于<body>-->的底部<脚本>//溶液Gprint（`[timestamp:${Date.now（）}]G:<body>底部脚本`）；</script></body></html>
这个问题很久以前就被问过了。对于任何看到这个问题的人来说，现在有一个名为“您可能不需要jquery”的网站，它按所需的IE支持级别分解了jquery的所有功能，并提供了一些替代的、较小的库。
IE8文档就绪脚本，根据您可能不需要jquery
function ready(fn) {
if (document.readyState != 'loading')
fn();
else if (document.addEventListener)
document.addEventListener('DOMContentLoaded', fn);
else
document.attachEvent('onreadystatechange', function() {
if (document.readyState != 'loading')
fn();
});
}
跨浏览器（旧浏览器也是）和简单的解决方案：
var docLoaded = setInterval(function () {
if(document.readyState !== "complete") return;
clearInterval(docLoaded);
/*
Your code goes here i.e. init()
*/
}, 30);
在jsfiddle中显示警报
现在你应该使用模块。将代码放入模块的默认函数中，并将该函数导入脚本元素。
客户端.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>
