{j}等同于$(document).ready()
?
答案 0 :(得分:514)
这非常有效,来自ECMA
document.addEventListener("DOMContentLoaded", function() {
// code...
});
window.onload
不等于JQuery $(document).ready
,因为$(document).ready
只等待DOM树,window.onload
检查所有元素,包括外部资产和图像。
编辑:由于Jan Derk的观察,添加了IE8及更旧版本。您可以在MDN at this link上阅读此代码的来源:
// alternative to DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
// Initialize your application or run some code.
}
}
"interactive"
除了{{1}}之外还有其他选项。有关详细信息,请参阅the MDN链接。
答案 1 :(得分:73)
关于$(document).ready()
的好处是它会在window.onload
之前触发。加载功能等待所有内容加载,包括外部资源和图像。但是,{DOM}完成后可以触发$(document).ready
。如果你想准备好DOM,没有jQuery,你可以检查这个库。有人从jQuery中提取了ready
部分。它既漂亮又小巧,你可能会发现它很有用:
答案 2 :(得分:37)
我放在一起的小东西
<强> 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);
答案 3 :(得分:12)
有一个基于标准的替代品, DOMContentLoaded,超过90%以上的浏览器支持,但不支持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 );
}
答案 4 :(得分:9)
现在是2018年,这是一种快速简单的方法。
这将添加一个事件侦听器,但是如果它已经被触发,我们将检查dom处于就绪状态还是已完成。可以在子资源(图像,样式表,框架等)加载完成之前或之后触发。
function domReady(fn) {
// If we're early to the party
document.addEventListener("DOMContentLoaded", fn);
// If late; I mean on time.
if (document.readyState === "interactive" || document.readyState === "complete" ) {
fn();
}
}
domReady(() => console.log("DOM is ready, come and get it!"));
这里有一些我使用标准ES6 Import&Export编写的快速实用程序帮助程序,其中还包括TypeScript。也许我可以解决这些问题,使其成为一个可以作为依赖项安装到项目中的快速库。
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);
}
});
答案 5 :(得分:8)
根据http://youmightnotneedjquery.com/#ready,一个仍然适用于IE8的好替代品是
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();
});
}
}
// test
window.ready(function() {
alert('it works');
});
我个人也会检查fn
的类型是否为函数。
我之后回答这个问题的原因是因为我在寻找这个答案,但在这里找不到。我认为这是最好的解决方案。
答案 6 :(得分:4)
在普通的JavaScript中,没有库?这是一个错误。 $
只是一个标识符,除非您定义它,否则它是未定义的。
jQuery将$
定义为它自己的“所有对象”(也称为jQuery
,因此您可以使用它而不会与其他库发生冲突)。如果您不使用jQuery(或其他定义它的库),则不会定义$
。
或者你在问普通JavaScript中的等价物是什么?在这种情况下,您可能需要window.onload
,这不完全等效,但是在vanilla JavaScript中接近相同效果的最快捷,最简单的方法。
答案 7 :(得分:4)
最近浏览器中最简单的方法是使用适当的GlobalEventHandlers, onDOMContentLoaded , onload , onloadeddata (.. 。)
onDOMContentLoaded = (function(){ console.log("DOM ready!") })()
onload = (function(){ console.log("Page fully loaded!") })()
onloadeddata = (function(){ console.log("Data loaded!") })()
当初始HTML文档已完全加载并解析时,会触发DOMContentLoaded事件,而无需等待样式表,图像和子帧完成加载。应该仅使用非常不同的事件加载来检测完全加载的页面。使用负载是一个非常受欢迎的错误,其中DOMContentLoaded会更合适,所以要小心。
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 page fully loaded!") })()
最好是使用DOM元素,我们可以等待任何变量准备好,触发箭头IIFE。
行为将是相同的,但内存影响较小。
footer = (() => { console.log("Footer loaded!") })()
<div id="footer">
在许多情况下,文档对象也会在准备好时触发 ,至少在我的浏览器中是这样。 语法非常好,但需要进一步测试兼容性。
document=(()=>{ /*Ready*/ })()
答案 8 :(得分:0)
身体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>