Question

我有几页页眉和页脚相同。我想使用jQuery加载函数 -

$("#header").load("template.html  #template_h1");   
$("#footer").load("template.html  #template_f1");

我的问题：

这些页面已经包含一个带onload函数的脚本将一些span标记转换为新格式。
我的页眉和页脚确实使用了需要转换的span标记。
我无法更改包含的脚本。
我希望我的load()函数在onload函数之前运行。

我试图在$(document).ready(function()中运行它们，但为时已晚。标题\页脚中的span标记不会被转换。

我可以使用哪个活动？

Answer 1

.load()是异步的，因此无论您何时拨打电话，都不能依赖及时加载的元素。您必须使.load()同步（即阻止页面直到请求完成），但这是一个糟糕的主意。

这不是模仿IMO的好方法。此外，您可能会在页面正确之前要求完成两个请求，从而显着减慢页面加载速度。

如果可能，请从服务器端包含这些模板部件。

Answer 2

也许你可以保留onload函数的引用，做你的东西，然后运行原来的onload函数。如果将它放在body标记内，或者在生成初始onload的脚本之后将其包含在脚本中，它应该按预期工作。

var oldOnLoad = window.onload;

window.onload = function() {
   oldOnLoad();
}

编辑为了澄清，您需要在页眉和页脚下载后调用oldOnLoad。

var oldOnLoad = window.onload;
var headerComplete = false, footerComplete = false;

var callOldOnLoad = function() {
    if (headerComplete && footerComplete) {
        oldOnLoad();
    }
}

window.onload = function() {
    $("#header").load("template.html  #template_h1", function() {
        headerComplete = true;
        callOldOnLoad();
    });   
   $("#footer").load("template.html  #template_f1", function() {
        footerComplete = true;
        callOldOnLoad();
    });
}

尚未对此进行测试，但在调用oldOnLoad之前，您可能会遇到DOM未更新的问题。所以你可能需要将它放在setTimeout中。

setTimeout(function() {oldOnLoad();}, 0);

Answer 3

在HTML中定义<body>和header元素之后，只需将代码放在footer内。

示例：

<body>
    <div id="header">Foo</div>

    <script type="text/javascript">
        $("#header").load("template.html  #template_h1");
    </script>

    <!-- Other Content -->

    <div id="footer">Bar</div>

    <script type="text/javascript">
        $("#footer").load("template.html  #template_f1");
    </script>
</body>

此外，您可以将CSS包含放在文件的末尾，以便在代码之后加载CSS。

使用load（）和onLoad（）

3 个答案: