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 example here

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的说明，请参阅this answer。

异步加载标记（在页面加载结束后加载一些div）

2 个答案: