什么是非jQuery等价的‘$（document）.ready（）‘？

最新推荐文章于 2021-06-03 15:37:23 发布

CHCH998

最新推荐文章于 2021-06-03 15:37:23 发布

阅读量191

点赞数

文章标签： javascript jquery

原文链接：https://oldbug.net/q/9FCt/What-is-the-non-jQuery-equivalent-of-document-ready

版权

本文翻译自：What is the non-jQuery equivalent of '$(document).ready()'?

什么是$(document).ready() jQuery等价的$(document).ready() ？

#1楼

参考：https://stackoom.com/question/9FCt/什么是非jQuery等价的-document-ready

#2楼

This works perfectly, from ECMA 这非常适合ECMA

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

The window.onload doesn't equal to JQuery $(document).ready because $(document).ready waits only to the DOM tree while window.onload check all elements including external assets and images. window.onload不等于JQuery $(document).ready因为$(document).ready只等待DOM树，而window.onload检查包括外部资源和图像在内的所有元素。

EDIT : Added IE8 and older equivalent, thanks to Jan Derk 's observation. 编辑：由于Jan Derk的观察，添加了IE8和更旧的等价物。 You may read the source of this code on MDN at this link : 您可以在此链接上阅读MDN 上此代码的来源：

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

There are other options apart from "interactive" . 除了"interactive"之外还有其他选择。 See the MDN link for details. 有关详细信息，请参阅MDN链接。

#3楼

In plain vanilla JavaScript, with no libraries? 在普通的JavaScript中，没有库？ It's an error. 这是一个错误。 $ is simply an identifier, and is undefined unless you define it. $只是一个标识符，除非你定义它，否则是未定义的。

jQuery defines $ as it's own "everything object" (also known as jQuery so you can use it without conflicting with other libraries). jQuery将$定义为它自己的“所有对象”（也称为jQuery因此您可以使用它而不会与其他库冲突）。 If you're not using jQuery (or some other library that defines it), then $ will not be defined. 如果您不使用jQuery（或其他一些定义它的库），则不会定义$ 。

Or are you asking what the equivalent is in plain JavaScript? 或者你在问普通JavaScript中的等价物是什么？ In that case, you probably want window.onload , which isn't exactly equivalent, but is the quickest and easiest way to get close to the same effect in vanilla JavaScript. 在这种情况下，您可能需要window.onload ，它不完全等效，但是在vanilla JavaScript中接近相同效果的最快捷，最简单的方法。

#4楼

The nice thing about $(document).ready() is that it fires before window.onload . 关于$(document).ready()是它在window.onload之前触发。 The load function waits until everything is loaded, including external assets and images. 加载功能等待所有内容加载，包括外部资源和图像。 $(document).ready , however, fires when the DOM tree is complete and can be manipulated. 但是， $(document).ready会在DOM树完成并且可以被操作时触发。 If you want to acheive DOM ready, without jQuery, you might check into this library. 如果你想准备好DOM，没有jQuery，你可以检查这个库。 Someone extracted just the ready part from jQuery. 有人从jQuery中提取了ready部分。 Its nice and small and you might find it useful: 它很好很小，你可能会发现它很有用：

domready at Google Code 已完全使用Google Code

#5楼

A little thing I put together 我放在一起的小东西

domready.js 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);

How to use it 如何使用它

<script src="domready.js"></script>
<script>
  domReady(function(event) {
    alert("dom is ready!");
  });
</script>

You can also change the context in which the callback runs by passing a second argument 您还可以通过传递第二个参数来更改回调运行的上下文

function init(event) {
  alert("check the console");
  this.log(event);
}

domReady(init, console);

#6楼

The body onLoad could be an alternative too: 身体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>