1

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

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

4

3 回答 3

0

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

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

于 2013-10-24T13:58:55.383 回答
0

不。据我所知，确实没有更好的方法。

<!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>
于 2013-10-27T22:06:26.667 回答
-1

您可以使用：

$(文档).ready(处理程序)

（推荐）也有契约形式：

$（处理程序）

例子：

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

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

于 2013-10-24T13:57:33.783 回答