我有一个使用$（document）.ready的脚本，但它不使用jQuery中的任何其他内容。我想通过删除jQuery依赖项来减轻它。
如何在不使用jQuery的情况下实现我自己的$（document）.ready功能？我知道，使用window.onload将不同，因为window.onlead在加载所有图像、帧等后启动。
当前回答
大多数普通的JS Ready函数都不考虑在文档加载后设置DOMContentLoaded处理程序的情况——这意味着函数永远不会运行。如果在异步外部脚本（<script async src=“file.js”></script>）中查找DOMContentLoaded，则可能会发生这种情况。
只有当文档的readyState尚未交互或完成时，下面的代码才会检查DOMContentLoaded。
var DOMReady = function(callback) {
document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback());
};
DOMReady(function() {
//DOM ready!
});
如果您也想支持IE：
var DOMReady = function(callback) {
if (document.readyState === "interactive" || document.readyState === "complete") {
callback();
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', callback());
} else if (document.attachEvent) {
document.attachEvent('onreadystatechange', function() {
if (document.readyState != 'loading') {
callback();
}
});
}
};
DOMReady(function() {
// DOM ready!
});
其他回答
大多数普通的JS Ready函数都不考虑在文档加载后设置DOMContentLoaded处理程序的情况——这意味着函数永远不会运行。如果在异步外部脚本（<script async src=“file.js”></script>）中查找DOMContentLoaded，则可能会发生这种情况。
只有当文档的readyState尚未交互或完成时，下面的代码才会检查DOMContentLoaded。
var DOMReady = function(callback) {
document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback());
};
DOMReady(function() {
//DOM ready!
});
如果您也想支持IE：
var DOMReady = function(callback) {
if (document.readyState === "interactive" || document.readyState === "complete") {
callback();
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', callback());
} else if (document.attachEvent) {
document.attachEvent('onreadystatechange', function() {
if (document.readyState != 'loading') {
callback();
}
});
}
};
DOMReady(function() {
// DOM ready!
});
2022版本
2022年，您需要做的就是将defer属性放在脚本上，并将其加载到头部！
参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-推迟
<!doctype html>
<html>
<head>
<script src="/script.js" defer></script>
</head>
<body>
<p>In 2022, all you need to do is put the defer attribute on your script, and load it in the head!</p>
</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();
});
}
与jQuery相比，使用JavaScript等价物总是很好的。一个原因是依赖的库少了一个，而且它们比jQuery等同物快得多。
jQuery等价物的一个极好的参考是http://youmightnotneedjquery.com/.
就您的问题而言，我从上面的链接中获取了以下代码：）唯一需要注意的是，它仅适用于Internet Explorer 9及更高版本。
function ready(fn) {
if (document.readyState != 'loading') {
fn();
}
else {
document.addEventListener('DOMContentLoaded', fn);
}
}
试试看：
function ready(callback){
if(typeof callback === "function"){
document.addEventListener("DOMContentLoaded", callback);
window.addEventListener("load", callback);
}else{
throw new Error("Sorry, I can not run this!");
}
}
ready(function(){
console.log("It worked!");
});
