如果代码位于底部,那么放置$(document).ready函数有什么意义呢?

时间:2012-05-26 03:17:58

标签: javascript jquery html

Jquery在这里相当新......但是我被告知并且正在做的一件事是在阅读html后在我的页面底部添加我的Javascript。

现在,我看到人们添加了$(document).ready(function(),即使代码位于页面底部。是不是在读取HTML时逐步构建DOM?到最后阅读HTML,不应该自动准备DOM,因此,添加此检查的重点是什么?

例如,小型演示:

<ul>
    <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>

<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>
<script>
alert("In Page");
</script>

</div><!-- End demo -->

<script>
$(function() {
    alert("Dom is READY");
    $( "#sortable" ).sortable({
    revert: true
    });

    $( "#accordion" ).accordion();
});
</script>

“In Page”总是首先出现......是因为HTML不够“大”吗?

2 个答案:

答案 0 :(得分:3)

真相是document.ready和文档底部几乎是一回事,因为在文档末尾所有控件都存在。我个人仍然更喜欢document.ready,因为它是JQuery框架识别文档结束的方式(理想情况下我们应该坚持框架的推荐方式),其次它会照顾任何错误地移动代码的人。

答案 1 :(得分:2)

当你以这种方式内联编写代码时,假设你在头部加载jQuery,可能没有必要使用文档onReady。

当您的页面代码通过文档中的外部JavaScript资源(可能不在底部)加载时,它开始有所不同。这样做的原因主要是因为您的浏览器可以缓存代码,从而减少网络开销。