javascript - 在 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页面有一个大图像，需要时间来加载。因此，我想展示一个 laoding.gif图片转入<div id="box"></div>同时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.