注意：dom ready！= window onload

Question

在jquery $（document）.ready（function）或$（function）中，如果没有jquery，我怎么能做同样的事情，我需要浏览器兼容，并允许附加多个函数。

注意：dom ready！= window onload

Answer 1

这是jQuery包装你正在寻找的功能的方式 - 该代码片段不需要jQuery，并且是跨浏览器兼容的。我用yourcallback替换了所有对jQuery.ready（）的调用 - 你需要定义它。

这里发生了什么：

首先，定义了函数DOMContentLoaded，它将在DOMContentLoaded事件触发时使用 - 它确保回调只被调用一次。
检查文档是否已加载 - 如果是，立即触发回调
否则嗅探功能（document.addEventListener / document.attachEvent）并将回调绑定到它（IE和普通浏览器不同，加上onload回调）

Lifted from jQuery 1.4.3, functions bindReady() and DOMContentLoaded：

/*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
// Cleanup functions for the document ready method
// attached in the bindReady handler
if ( document.addEventListener ) {
DOMContentLoaded = function() {
    document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
    //jQuery.ready();
            yourcallback();
};

} else if ( document.attachEvent ) {
DOMContentLoaded = function() {
    // Make sure body exists, at least, in case IE gets a little overzealous 
            if ( document.readyState === "complete" ) {
        document.detachEvent( "onreadystatechange", DOMContentLoaded );
        //jQuery.ready();
                    yourcallback();
    }
    };
}

// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
    // Handle it asynchronously to allow scripts the opportunity to delay ready
//return setTimeout( jQuery.ready, 1 );
    // ^^ you may want to call *your* function here, similarly for the other calls to jQuery.ready
    setTimeout( yourcallback, 1 );
}

// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
    // Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
//window.addEventListener( "load", jQuery.ready, false );
    window.addEventListener( "load", yourcallback, 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", DOMContentLoaded);

        // A fallback to window.onload, that will always work
        window.attachEvent( "onload", yourcallback );

 }

这是51行纯JavaScript代码，只是为了可靠地注册事件。据我所知，没有比较简单的方法了。去展示像jQuery这样的包装器有什么用处：它们包含功能嗅探和丑陋的兼容性问题，以便您可以专注于其他事情。

Answer 2

Smallest DOMReady code, ever.

<html>
  <head>
    <script>
      var ready = function (f) {
        (/complete|loaded|interactive/.test(document.readyState)) ?
            f() :
            setTimeout(ready, 9, f);
      };
    </script>
  </head>
  <body>
    <script>
      ready(function () {
        alert('DOM Ready!');
      });
    </script>
  </body>
</html>

Answer 3

如果您支持IE9 +和现代（2013）版本的Chrome，FF，Safari等，这就是您所需要的。

function ready(event) {
    // your code here
    console.log('The DOM is ready.', event);
    // clean up event binding
    window.removeEventListener('DOMContentLoaded', ready);
}

// bind to the load event
window.addEventListener('DOMContentLoaded', ready);

Answer 4

这是我使用的方法似乎可靠地工作

function ready(func) {
  var span = document.createElement('span');
  var ms = 0;
  setTimeout(function() {
    try {
      document.body.appendChild(span);

      document.body.removeChild(span);

      //Still here? Then document is ready
      func();
    } catch(e) {
      //Whoops, document is not ready yet, try again...

      setTimeout(arguments.callee, ms);
    }
  }, ms);
}

非常简单，它只是不断尝试将空<span>元素附加到document.body。如果文档没有“准备就绪”，则会抛出异常，在这种情况下，它会再次尝试新的setTimeout调用。一旦没有抛出异常，它就会调用回调函数。

我很高兴听到这种方法有任何问题。它对我来说效果很好，但我还没有做过任何流行的Javascript框架都很自然的广泛测试。

Answer 5

我已经看到了很多不同的方法来尝试这样做。最简单的方法（我认为最初由yahoo建议）是在关闭body标签之后调用你的初始化函数，有点突兀，但它只是一行。

Answer 6

修改

在JavaScript中，DomReady事件不存在。您可以通过跟随Dean Edwards here和here等人完成的一些精彩工作来实现您自己的工作，您可以在文档而不是窗口上执行类似的事件附件处理。

查看user83421对How do I add an additional window.onload event in Javascript

的回答

回顾一下。

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', myFunction, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', myFunction);
}

Answer 7

在关闭身体之后，我有这个。标签和关闭html＆＃39;之前标签。它运作得很好。加载预设功能将宽度，高度和位置值分配给css div标签。适用于不同的屏幕尺寸。

document.onreadystatechange = function () {
if  (document.readyState == "interactive") {
loadPresets();
}

}

javascript：如何编写$（document）.ready像没有jquery的事件

注意：dom ready！= window onload

7 个答案:

修改