Question

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

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

Answer 1

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

HTML从上到下进行解析，因此元素将被加载。

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

Answer 3

你可以使用：

$（document）.ready（handler）

（推荐）并且还签订了合同形式：

$（处理程序）

为例：

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

了解详情：http://api.jquery.com/ready/

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

3 个答案: