jquery - 异步加载Markup(页面加载结束后加载一些div)

Question

我的标记如下

<div id="loggedIn">
    <div id="left-col" class="left">
        <div id="nav">
                <!-- load later -->
                <?php include('file1.php'); ?>
        </div>
        <div class="clear"></div>
    </div>
    <div id="right-col" class="left">
        <!-- load later -->
            <?php include('file2.php'); ?>
    </div>
</div>

所以我希望页面首先加载标记。然后我想显示ajax加载动画gif图像，直到加载file1.php和file2.php。

我想在 jQuery 中做到这一点。我正在考虑类似 $("#nav").load('file1.php'); 但我什么时候触发该事件？

任何人都可以帮我解决 jQUery 代码吗？

Answer 1

您可以在通过 Ajax 加载内容之前在 div 中添加图像:

<div id="loggedIn">
    <div id="left-col" class="left">
        <div id="nav">
        <!-- load later -->
        <img src="ajaxLoader.gif" id="ajaxLoader1"/>
        </div>
        <div class="clear"></div>
    </div>
    <div id="right-col" class="left">
        <!-- load later -->
        <img src="ajaxLoader.gif" id="ajaxLoader1"/>
    </div>
</div>

然后使用 load() 加载内容当 DOM 准备好时:

$(document).ready(function() {
    $("#nav").load("file1.php", function() {
        $("#ajaxLoader1").remove();
    });
    $("#right-col").load("file2.php", function() {
        $("#ajaxLoader2").remove();
    });
});

这将加载 div 中的 php 文件，并删除 <img>完成后。

jsFiddle example here