Question

可能重复：
$(document).ready equivalent without jQuery

我有一个无框架的javascript，可以在加载时执行：

function myJs() {    
   // some code
}
window.load = myJs;

但这会导致脚本执行延迟。我希望能够在文档准备好被操作之后立即执行此脚本，甚至在页面完全加载之前。如何以跨浏览器兼容的方式完成？换句话说，怎么可以：

$(document).ready(function() {  
   //
});

jQuery的简称是用简单的JS吗？

Answer 1

我已经实现了一个实现（基于jQuery中的一个实现），您可以使用：http://github.com/jakobmattsson/onDomReady/blob/master/ondomready.js

Answer 2

//old IE
document.onreadystatechange = function() {
   if (this.readyState === "complete"){
      //whatev
   }
};


//for everyone else
document.addEventListener("DOMContentLoaded", function () {
  //whatev
  }, false);

Answer 3

实际上并没有那么糟糕。您需要一种方法将事件添加到document，并了解这些事件应该是什么。使用标准addEvent函数

function addEvent( obj, type, fn )
{
 if (obj.addEventListener)
 {
   obj.addEventListener( type, fn, false );
 }
 else if (obj.attachEvent)
 {
  obj["e"+type+fn] = fn;
  obj[type+fn] = function() { return obj["e"+type+fn]( window.event ); };
  obj.attachEvent( "on"+type, obj[type+fn] );
 }
}

您可以执行以下操作：

// IE
addEvent(document, 'DOMContentLoaded', function() {
    alert('ready');
});

// Other
addEvent(document, 'onreadystatechange', function() {
    if (document.readyState == 'complete')
        alert('ready');
});

// For demonstration purposes, show a 'load' event
addEvent(window, 'load', function() {
    alert('load');
});

IE事件处理程序不会在其他浏览器中触发，反之亦然。

Answer 4

但这会导致脚本执行延迟。我希望能够在文档准备好后立即执行此脚本甚至在页面完全加载之前就进行了操作。

有三种方法可以解决这个问题：

正如一些人已经建议的那样，您可以从jQuery源代码中汲取灵感并将其集成到您的脚本中。（我建议观看Paul Irish on jQuery Source并查看JS Libs Deconstructed。
您可以将函数调用放在body标记的末尾而不是head标记中。这允许在脚本启动之前加载所有DOM元素。
如果您不需要使用DOM，您可以将其设置为自动执行功能，这样您就不必等待任何事情。 (function startNow(){}())

Answer 5

放

function myJs() {    
   // some code
}

<head></head>中的

和

window.load = myJs;

在</body>

之前

Answer 6

你可以在任何地方创建一个函数，在

中调用它

`<body onLoad="function();">`

如何在JavaScript中检测document.ready？

6 个答案: