什么时候需要使用 $(document).ready()？答案

【问题标题】：when do you need to use $(document).ready()?什么时候需要使用 $(document).ready()？
【发布时间】：2011-05-15 00:53:33
【问题描述】：

我很好奇什么情况下需要使用 jquery 的 $(document).ready() 或原型的 dom:loaded 或任何其他变体的处理程序来处理此事件。

在我测试过的所有浏览器中，在结束标记之后立即开始与 html 元素和 DOM 交互是完全可以接受的。（例如

<div id="myID">
 My Div
</div>
<script type="text/javascript">
$('#myID').initializeElement();
</script>

所以此时我想知道$(document).ready() 是否只是为了减少编写在页面加载期间运行的javascript 代码所涉及的思考。在使用$(document).ready() 的情况下，在浏览器首次开始绘制页面和页面“就绪”时实际执行的 javascript 之间经常会出现诸如弹出和“伪影”之类的渲染问题。

是否有需要$(document).ready() 的场景？

有什么理由我不应该像演示的那样编写初始化脚本吗？

【问题讨论】：

jQuery: Why use document.ready if external JS at bottom of page? 的可能重复项

标签： javascript jquery

【解决方案1】：

主要原因是头部包含外部文件。当您在 <head> 中包含一个文件时，它会立即运行。这意味着如果 JavaScript 与 DOM 交互，则需要将其包装在 Dom Ready 中。

不显眼的 JavaScript 和关注点分离也需要它。理想情况下，您的 JavaScript 和 HTML 位于不同的文件中。如果您遵循这一点，您的 HTML 中将根本没有任何内嵌脚本标签。

第二个是当你犯错时保护自己免受晦涩的浏览器错误。在某些情况下，之后立即去操作 DOM 元素是不值得的。（我在看你IE6！）

第三个原因是保持代码干净。

将脚本标签混合到 HTML 中会产生意大利面条式代码。

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

我们的代码比这差十倍。阅读/维护是一种正确的痛苦

【讨论】：

我认为用 $(document).ready() 初始化 dom 元素是相当突兀的，因此会出现渲染问题。不过，你确实提出了一些好的观点。
@SmokingRope 初始化 DOM 元素是什么意思？不显眼的 JavaScript 应该与渐进增强一起使用。加载 DOM 后，您只能使用 JavaScript 增强已经存在的 DOM 元素。
初始化我的意思和你的“渐进式增强”一样。制作一个包含 1MB 的
的测试 html 文件，在浏览器中加载它并使用 $(document).ready() 隐藏这些 div。在浏览器开始呈现您的页面后，无论您想要什么渐进式增强功能都不会在几分钟/几秒内生效。这种影响也可能会因网络状况而被夸大，因此在您的客户从异地访问您的页面之前，它可能不会显示。
@SmokingRope 您的问题是您发送了一个 1MB 的 HTML 文件。您的 HTML 页面应该可以在没有 JavaScript 的情况下工作。如果它真的那么大，请让 JavaScript 将加载叠加层作为内联脚本注入。如果您的页面在没有 JavaScript 的情况下看起来很糟糕/凌乱，那么这本身就是问题所在。
@SmokingRope 避免跳转页面的正确方法是将它们呈现在它们应该处于的状态。您不应该以这种方式使用 Javascript 作为拐杖。

【解决方案2】：

对于外部脚本 $(document).ready() 可能是唯一的选择。至于内联脚本，则有点不同。

根据 HTML 4.01 标准，上面显示的初始化技术是否合法似乎有点模棱两可：

http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.4

加载文档时执行的脚本可能能够修改文档的内容动态的。这样做的能力取决于脚本语言本身（例如，“document.write” HTML 对象模型中的语句一些供应商支持）。

HTML 文档之前都被限制为符合 HTML DTD 在处理任何 SCRIPT 之后元素。

在 HTML 5 草案中，这种做法似乎得到了完全支持：

http://www.w3.org/TR/html5/scripting-1.html#scripting-1

以下示例显示了如何 script 元素可用于定义一个然后被其他人使用的功能文件的一部分。它还显示如何使用脚本元素在文档存在时调用脚本被解析，在这种情况下初始化表单的输出。

<script>
 function calculate(form) {
   var price = 52000;
   if (form.elements.brakes.checked)
     price += 1000;
   if (form.elements.radio.checked)
     price += 2500;
   if (form.elements.turbo.checked)
     price += 5000;
   if (form.elements.sticker.checked)
     price += 250;
   form.elements.result.value = price;
 }
</script>
<form name="pricecalc" onsubmit="return false">
 <fieldset>
  <legend>Work out the price of your car</legend>
  <p>Base cost: £52000.</p>
  <p>Select additional options:</p>
  <ul onchange="calculate(form)">
   <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li>
   <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li>
   <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li>
   <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li>
  </ul>
  <p>Total: £<output name=result></output></p>
 </fieldset>
 <script>
  calculate(document.forms.pricecalc);
 </script>
</form>

【讨论】：

+1 用于指出规范。但我不相信 IE 在 HTML5 文档类型下表现正确。

【解决方案3】：

在加载 DOM 并且在加载页面内容之前，其中的所有内容都会加载。

$(document).ready() 函数比其他让事件生效的方法有很多优势。首先，您不必在 HTML 中放置任何“行为”标记

使用 $(document).ready()，您可以让您的事件在窗口加载之前加载或触发，或者您希望它们执行的任何操作。

【讨论】：