当文档中的单个元素准备就绪时触发事件的最佳方式答案

【问题标题】：Best way to fire events when single elements in the document becomes ready当文档中的单个元素准备就绪时触发事件的最佳方式
【发布时间】：2013-11-03 06:26:03
【问题描述】：

我正在开发一个 Web 应用程序，由于性能问题，它严重依赖 Ajax 功能。我正在尝试在加载运行时间较长的模块时使每个页面的某些部分可用。

问题是我想尽快启动 Ajax 请求（在文档的开头）。这部分工作正常；问题是在极少数情况下，Ajax 调用会在我要加载 Ajax 数据的区域出现在页面上之前返回。这会导致数据无法加载。

为了解决这个问题，我开始在每个容器下方使用脚本标记来解析 JQuery 承诺，让代码知道该区域可用。

编辑：我想将数据加载到该区域一旦可用（在完整文档加载之前）。

当前的伪代码如下：

<head>
    <script> 
        var areaAvailablePromise = new $.Deferred();
        $.when(areaAvailablePromise, myAjaxFunction()).then(function(){
            // load data into the element.
        });
    </script>
</head>

<!-- much later in the document -->

<div class="divIWantToLoadAjaxContentInto"></div>
<script>
    areaAvailablePromise.resolve();
</script>

我的问题是：有没有更好的方法来处理这种情况？每个人都知道内联脚本会阻塞并且不利于性能。另外，我觉得这会导致代码混乱，到处都是微脚本标签。

【问题讨论】：

window.onload 怎么样
我想在元素可用时（在整个文档准备好之前）将 Ajax 数据加载到元素中。
如果你在指定的元素之后不依赖其他元素，你想让 Ajax 调用它，所以你的方式是最好的
把你的代码放在关闭body标签之前，这样浏览器会渲染所有的html然后执行脚本。如果不需要相互交互以最终防止脚本阻塞，您也可以异步引用js文件...
听起来我的做法是实现我想要的非常具体的时间的唯一方法。

标签： javascript jquery ajax dom promise

【解决方案1】：

将您的（整个）<script> 标签放在元素之后。

HTML是从上到下解析的，所以元素已经被加载了。

【讨论】：

【解决方案2】：

没有。据我所知，真的没有更好的方法了。

<!doctype html>
<html>
    <head>
        <script src="jquery.min.js"></script>
        <script src="q.min.js"></script>
        <script>
            var elD = Q.defer();
            var dataP = Q($.ajax(…));
            Q.spread([elD.promise, dataP], function (el, data) {
                …
            }).done();
        </script>
    </head>
    <body>
        …
        <div id="foo"></div>
        <script>elD.resolve($("#foo"));</script>
        …
    </body>
</html>

【讨论】：

【解决方案3】：

你可以使用：

$(document).ready(处理程序)

（推荐）也有契约形式：

$（处理程序）

示例：

$(function(){ 
  alert("OK"); 
})

阅读更多：http://api.jquery.com/ready/

【讨论】：

@Satpal 的回答重复。