页面loading功能的实现

最新推荐文章于 2025-03-06 10:37:49 发布

110鸢飞

最新推荐文章于 2025-03-06 10:37:49 发布

阅读量2.4k

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/u014426405/article/details/74079785

版权

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在点击按钮并使用ajax调用后端服务时，在前端显示loading效果。通过在页面上添加一个id为loading的div，利用JavaScript动态改变其display属性和innerHTML，实现在请求期间显示loading页面。在请求完成时，隐藏loading效果。同时，文章还提到了使用iframe作为另一种实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天准备在点击一个按钮时使用ajax调用后端服务，在等待请求的返回值的时候在前端实现loading效果，而loading时加载的html页面已经写好。

主要方法为：在按钮所在页面添加id为loading的div 当页面加载时设置此div的display属性为none，并加载此div的innerHTML内容为loading对应的html页面，对应的代码为：

document.getElementById("loading").style.display="none";
document.getElementById("loading").innerHTML = '<object type="text/html" data="uavapp_comptest/cruds/html/dialog.html" width="100%" height="600px"></object>';

之后在调用ajax服务之前修改div的display属性使其可见，并重新加载div的innerHTML内容，对应代码为：

document.getElementById("loading").style.display="";
document.getElementById("loading").innerHTML = '<object type="text/html" data="uavapp_comptest/cruds/html/dialog.html" width="100%" height="600px"></object>';

最后在ajax返回结果后，重新将div的display属性设置为不可见，对应代码为：

document.getElementById("loading").style.display="none";

综上，功能实现。

另外，对于修改innerHTML为指定html文件的方法，还可以使用iframe，代码如下：

document.getElementById("loading").innerHTML ='<iframe align="center" width="950" height="170" src="uavapp_comptest/cruds/html/dialog.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>';