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

Best way to fire events when single elements in the document becomes ready

本文关键字：事件 最佳 方法 准备就绪 文档 单个 元素      更新时间：2023-09-26

我正在开发一个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>

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

把你的（整个）<script>标签放在元素后面。

HTML 是从上到下解析的，因此元素已经加载。

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

<!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>

您可以使用：

$（document）.ready（ handler ）

（推荐）并且还具有合同形式：

$（处理程序）

示例：

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

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

相关文章：