裝載標記異步（加載一些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> 

所以我希望頁面首先加載標記。然後我想要顯示加載動畫gif圖像的ajax，直到加載了file1.php和file2.php。

我想在jQuery中做到這一點。我在想像$("#nav").load('file1.php');之類的東西，但是我什麼時候開火？

任何人都可以幫助我的jQuery代碼??

Answer 1

你可以在你的DIV加載通過Ajax的內容前添加圖像：

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

這將加載PHP：當DOM準備

<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()內容文件在div中，並在完成時刪除<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。