异步加载标记(在页面加载结束后加载一些 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>

然后在 DOM 准备就绪时使用load()加载内容：

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

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

jsFiddle 示例在这里

Answer 2

您可以将load调用放在文档就绪处理程序中，并使用其回调来跟踪何时完成加载：

$(function() {
    function done_checker() {
        /* See below */
    }
    // Show loading image here
    $('#nav').load('file1.php', done_checker);
    $('#right-col').load('file2.php', done_checker);
});

done_checker函数将等到两个文件都加载完毕，然后删除加载的图像;有关如何构建done_checker的说明，请参阅此答案。