非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>
其他回答
根据http://youmightnotneedjquery.com/#ready的说法，一个很好的替代品仍然适用于IE8
函数准备(fn) { 如果文档。readyState != 'loading') { fn (); } else if (document.addEventListener) { 文档。addEventListener (DOMContentLoaded”内,fn); }其他{ 文档。attachEvent('onreadystatechange'， function() { 如果文档。readyState != 'loading') fn (); })； ｝ ｝ / /测试 window.ready(函数(){ alert('它'); })；
改进:我个人也会检查fn的类型是否为函数。 正如@elliottregan建议的那样，在使用后删除事件侦听器。
function ready(fn) { if (typeof fn !== 'function') { throw new Error('Argument passed to ready should be a function'); } if (document.readyState != 'loading') { fn(); } else if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fn, { once: true // A boolean value indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked. }); } else { document.attachEvent('onreadystatechange', function() { if (document.readyState != 'loading') fn(); }); } } // tests try { window.ready(5); } catch (ex) { console.log(ex.message); } window.ready(function() { alert('it works'); });
我之所以回答这个问题晚，是因为我一直在寻找这个答案，但在这里找不到。我认为这是最好的解决办法。
在最近的浏览器中最简单的方法是使用适当的GlobalEventHandlers, onDOMContentLoaded, onload, onloadeddata(…)
onDOMContentLoaded = (function(){console.log("DOM就绪!")})() onload = (function(){console.log("页面已加载完毕!")})() onlodeddata = (function(){console.log("数据已加载!")})()
当初始HTML文档完全加载和解析时，无需等待样式表、图像和子帧完成加载，就会触发DOMContentLoaded事件。应该只使用完全不同的事件加载来检测完全加载的页面。在更适合使用DOMContentLoaded的地方使用load是一个非常普遍的错误，所以要谨慎。
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
使用的函数是一个IIFE，在这种情况下非常有用，因为它在准备好时触发自己:
https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
显然，将它放在任何脚本的末尾更合适。
在ES6中，我们也可以把它写成一个箭头函数:
onload = (() => {console.log("ES6页面已完全加载!")})()
最好的方法是使用DOM元素，我们可以等待任何变量准备好，从而触发一个带箭头的IIFE。
行为将是相同的，但内存影响较小。
页脚 = (() => { console.log(“页脚加载!”)})() < div id = "脚注" >
有一个基于标准的替换
超过90%以上的浏览器支持DOMContentLoaded，但不是 IE8(以下代码由JQuery提供浏览器支持)
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 );
}
主体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>
我拼凑的一个小东西
domready.js
(function(exports, d) {
function domReady(fn, context) {
function onReady(event) {
d.removeEventListener("DOMContentLoaded", onReady);
fn.call(context || exports, event);
}
function onReadyIe(event) {
if (d.readyState === "complete") {
d.detachEvent("onreadystatechange", onReadyIe);
fn.call(context || exports, event);
}
}
d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) ||
d.attachEvent && d.attachEvent("onreadystatechange", onReadyIe);
}
exports.domReady = domReady;
})(window, document);
如何使用
<script src="domready.js"></script>
<script>
domReady(function(event) {
alert("dom is ready!");
});
</script>
您还可以通过传递第二个参数来更改回调运行的上下文
function init(event) {
alert("check the console");
this.log(event);
}
domReady(init, console);
