非jquery的$(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>
其他回答
现在是2018年，这里有一个快速而简单的方法。
这将添加一个事件监听器，但如果它已经被触发，我们将检查dom是否处于就绪状态或它是否完整。这可以在子资源完成加载(图像、样式表、框架等)之前或之后触发。
函数domReady(fn) { //如果我们到派对早 文档。addEventListener(“DOMContentLoaded”内,fn); //如果迟到;我的意思是准时。 如果文档。readyState === "interactive" ||文档。readyState === "complete") { fn (); ｝ ｝ domReady(() => console.log("DOM准备好了，来拿吧!"));
额外的数据
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded 检查加载是否已经完成 https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
更新
下面是一些使用我编写的标准ES6导入和导出的快速实用工具，也包括TypeScript。也许我可以让这些快速库可以安装到项目作为一个依赖。
JavaScript
export const domReady = (callBack) => {
if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', callBack);
}
else {
callBack();
}
}
export const windowReady = (callBack) => {
if (document.readyState === 'complete') {
callBack();
}
else {
window.addEventListener('load', callBack);
}
}
打印稿
export const domReady = (callBack: () => void) => {
if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', callBack);
}
else {
callBack();
}
}
export const windowReady = (callBack: () => void) => {
if (document.readyState === 'complete') {
callBack();
}
else {
window.addEventListener('load', callBack);
}
}
承诺
export const domReady = new Promise(resolve => {
if (document.readyState === "loading") {
document.addEventListener('DOMContentLoaded', resolve);
}
else {
resolve();
}
});
export const windowReady = new Promise(resolve => {
if (document.readyState === 'complete') {
resolve();
}
else {
window.addEventListener('load', resolve);
}
});
主体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>
这从ECMA完美地工作。这段代码是您所需要的全部内容，但如果您想挖掘更多内容并探索其他选项，请查看这段详细的解释。
document.addEventListener("DOMContentLoaded", function() {
// code...
});
窗外。onload不等于JQuery $(document)。因为$(document)。ready只等待DOM树while窗口。Onload检查所有元素，包括外部资产和图像。
编辑:由于Jan Derk的观察，添加了IE8和更老的版本。您可以在MDN上阅读此代码的源代码:
// alternative to DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
// Initialize your application or run some code.
}
}
除了“互动性”，还有其他选择。详见MDN文档。
在普通的JavaScript中，没有库?这是一个错误。$只是一个标识符，除非您定义它，否则它是没有定义的。
jQuery将$定义为它自己的“everything对象”(也称为jQuery，因此您可以在不与其他库冲突的情况下使用它)。如果你没有使用jQuery(或其他定义它的库)，那么$将不会被定义。
或者你是在问在纯JavaScript中有什么等价的东西吗?这样的话，你可能需要window。onload并不是完全等价的，但它是在普通JavaScript中接近相同效果的最快最简单的方法。
这没有回答问题，也没有显示任何非jquery代码。请看下面@ sospedra的回答。
$(document).ready()的优点是它在window.onload之前触发。load函数等待加载所有内容，包括外部资产和图像。美元(文档)。但是，当DOM树完成并且可以操作时，ready将被触发。如果你想在没有jQuery的情况下实现DOM，你可以查看这个库。有人从jQuery中提取了现成的部分。它又小又漂亮，你可能会发现它很有用:
domready at谷歌Code
