$ {document）.ready（）的非jQuery等效项是什么？

JavaScript

小宇宙古一

2020-03-16

什么是非jQuery等效项$(document).ready()？

第1710篇《$ {document）.ready（）的非jQuery等效项是什么？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答

小宇宙卡卡西 2020.03.16

在普通的JavaScript中，没有库？这是一个错误。$只是一个标识符，除非您定义它，否则是未定义的。

jQuery将$其定义为自己的“所有对象”（也称为，jQuery因此您可以在不与其他库冲突的情况下使用它）。如果您不使用jQuery（或其他定义它的库），则$不会被定义。

还是您在问普通JavaScript中的等效词是什么？在这种情况下，您可能想要window.onload，它并不完全等效，但是是在原始JavaScript中接近相同效果的最快，最简单的方法。

西里Mandy 2020.03.16

在最近的浏览器中，最简单的方法是使用适当的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/zh-CN/docs/Web/Events/DOMContentLoaded

使用的函数是IIFE，在这种情况下非常有用，因为它在准备就绪时会触发自身：

https://zh.wikipedia.org/wiki/立即调用功能_表达式

将它放在所有脚本的末尾显然更合适。

在ES6中，我们还可以将其编写为箭头函数：

onload = (() => { console.log("ES6 page fully loaded!") })()

最好是使用DOM元素，我们可以等待触发箭头IIFE的任何变量准备就绪。

行为将相同，但对内存的影响较小。

footer = (() => { console.log("Footer loaded!") })()

<div id="footer">

在许多情况下，至少在我的浏览器中，文档对象也会在就绪时触发。语法非常好，但是需要进一步测试兼容性。

document=(()=>{    /*Ready*/   })()

古一斯丁猴子 2020.03.16

正文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>

逆天Jim 2020.03.16

超过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 );
}

蛋蛋前端 2020.03.16

从ECMA上可以完美运行

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

之所以window.onload不等于JQuery，$(document).ready是因为$(document).ready在window.onload检查所有元素（包括外部资产和图像）时仅等待DOM树。

编辑：添加了IE8和更旧的等效版本，这要感谢Jan Derk的观察。您可以通过以下链接在MDN 上阅读此代码的源代码：

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Initialize your application or run some code.
    }
}

除了以外，还有其他选择"interactive"。有关详细信息，请参见MDN链接。

伽罗乐 2020.03.16

我整理了一点

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);

TomGO小小 2020.03.16

有趣的$(document).ready()是，它可以在之前触发window.onload。加载功能会一直等到所有内容加载完毕，包括外部资源和图像。$(document).ready但是，当DOM树完成并且可以进行操作时会触发。如果您想在没有jQuery的情况下实现DOM就绪，则可以签入此库。有人ready从jQuery中提取了一部分。它的大小不一，您可能会发现它很有用：