Javascript 在加载page inside div时显示微调器图像，在完全加载page inside div时隐藏微调器图像

我有这个菜单单

<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

页面有一个很大的图像，需要花费时间来加载。因此，我想在

profile.php

页面加载时，将

laoding.gif

图像显示到

中，当

profile.php

加载完成后，

loading.gif

图像应该隐藏，并且

profile.php

页面应该在

中可见

提前谢谢

我是一名学生，所以解决它对我来说有点困难

---

另外，我在谷歌上搜索了很多次，但没有一次成功。

你可以试试这样的方法：

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

$（“#box”）.html（“”.load（“/functions/profile.php”）；

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

---

您可以在调用

.load（）

之前显示正在加载的图像，并使用

.load（）

的完整回调来隐藏图像。有关API，请参阅。亲爱的@mpf82可能重复。请您指导我如何修复它。亲爱的@samrodrigues，这不是我要找的答案。对不起。如果你认为是这样，那就给我一个线索。谢谢你的评论。我试了试我的档案，但没有成功。请务必办理登机手续。谢谢。：）也许你会犯不同的错误。控制台中有错误吗？这是我的php文件中的错误@qaisali您能否提供更多的html结构您无法加载codepen或google，因为请求的资源上没有“Access Control Allow Origin”标头。

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