简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

JS实现页面加载时带loading进度条

高洛峰
发布： 2016-12-16 16:53:13
原创
1963 人浏览过

JS实现页面加载时带loading进度条

页面加载时loading实现方法

loading实现大概就这个意思，首先将要显示的内容隐藏，先显示loading文字或图片什么的，然后文档加载完毕后将内容显示出来，loading隐藏掉就好了。

这里我用到了jquery，用不用无所谓。

<html> 
<head> 
<script language="javascript" type="text/javascript" src="jquery-1.6.1.js">
</script> 
/** * 页面加载完成后显示页面 */ 
function showPage(){ $(&#39;#divPageLoading&#39;).remove(); 
$(&#39;#divPageBody&#39;).show(); } 
</head>
 <body onload="showPage();"> 
 <div id="divPageLoading"> 
 <img src="pageloading.gif" style="width:120px;height:120px;position:absolute;left:45%;top:40%;"/> 
 </div>
  <div id="divPageBody" style="display:none;"> …… 
 </div> 
 </body> 
 </html>
登录后复制



更多JS实现页面加载时带loading进度条相关文章请关注PHP中文网！

相关标签：
JS进度条
来源：php.cn
上一篇：JS 实现带进度条的页面跳转特效 下一篇：js发送邮件
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在多个路由中声明的workerpool是否仍然可以保持其cpu使用率而不关心阈值 我希望找到一个带有workerpool的node.js系统来处理CPU密集型任务，但是对于多条路由中的cpu使用情况，我有些困惑。一个场景是这样的：route1.js:constw...
来自于 2024-04-06 19:54:23
0
1
444
VueJS 调度函数的执行顺序导致问题 我正在尝试在页面上显示公告列表（从API检索）。我正在使用Vuex商店，并且有一个名为公告的状态。我还希望每次用户刷新/进入页面时都会更新此列表。所以我使用了生命周期钩子，特别是M...
来自于 2024-04-06 10:37:58
0
1
385
垂直旋转的表格标题，居中+底部对齐，跨浏览器 我的表格带有旋转标题，在Chrome中看起来符合预期，但在Firefox中却不是。Chromev108（垂直底部，水平中间）✅Firefoxv107（垂直中间，水平右）❌如何让它们...
来自于 2024-04-04 16:45:25
0
1
330
获取多个表中的数据时，如何在SQL分组中根据表中的条目进行查询 我有两张桌子点击2.ride点击表id|时间乘车表id|时间戳我想从两个表中获取数据GROUPBYEXTRACT(DAYFROMride.timestamp)但只有当我在同一天的两...
来自于 2024-04-04 08:58:17
0
1
319
使用 apply 中的方法 要找到数组的最大值，一个简单的方法是Math.max.apply(null,myArray)但是，假设myArray包含复数，并且每个复数都有一个方法magnitude来计算复数的...
来自于 2024-04-03 21:41:46
0
2
278
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！