我有一个使用$（document）.ready的脚本，但它不使用jQuery中的任何其他内容。我想通过删除jQuery依赖项来减轻它。
如何在不使用jQuery的情况下实现我自己的$（document）.ready功能？我知道，使用window.onload将不同，因为window.onlead在加载所有图像、帧等后启动。
当前回答
有一种基于标准的替代品DOMContentLoaded，99%以上的浏览器都支持它，但IE8:
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 );
}
其他回答
三个选项：
如果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函数。在这种情况下，您不是在解析和执行整个库，您只是在做其中的一小部分。
jQuery中的ready函数做了很多事情。坦率地说，除非你的网站有惊人的小输出，否则我看不出替换它的意义。jQuery是一个非常小的库，它处理您稍后需要的各种跨浏览器的事情。
无论如何，在这里发布它没有什么意义，只需打开jQuery并查看bindReady方法。
它首先根据事件模型调用document.addEventListener（“DOMContentLoaded”）或document.attachEvent（“unreadystatechange”），然后继续。
有一种基于标准的替代品DOMContentLoaded，99%以上的浏览器都支持它，但IE8:
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 );
}
一旦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（警报）；
只需将其添加到HTML页面的底部。。。
<script>
Your_Function();
</script>
因为，HTML文档是按上下顺序解析的。
