在 div 内的页面正在加载时显示微调器图像，并在页面完全加载到 div 内时隐藏微调器图像

Question

我有这个菜单列表

<ul class="nav navbar-nav" style="width:80px;">
   <li class="dropdown">
      <a href="#" class="dropdown-toggle">Profile</a>
         <ul class="dropdown-menu">
            <li id="profile"><a href="#">My Profile</a></li>
            <li id="drive"><a href="#">My Drive</a></li>
          </ul>
    </li>
</ul>

我称之为profile.php 和drive.php：

$(document).ready(function(){
    $("#profile").click(function(){
        $("#box").load("/functions/profile.php");
    });    
    $("#drive").click(function(){
        $("#box").load("/functions/drive.php");
    }); 
});

进入这个<div id="box"></div>，效果很好:)。

但是有一个问题，因为profile.php页面的图片很大，加载需要时间。因此，我想在<div id="box"></div> 中显示laoding.gif 图像，同时在其中加载profile.php 页面，当profile.php 加载完成时，loading.gif 图像应该被隐藏，profile.php 页面应该在<div id="box"></div>.

提前致谢。

我是学生，解决起来有点困难。

附：我在谷歌上搜索了很多，但没有成功。

Answer 1

你可以试试这样的：

$("#box").html("<img src='laoding.gif' />").load("/functions/profile.php");

这将改变#box元素的html，直到加载函数完成并再次替换内容。

Working example.