如何实现在页面上所有内容加载完之前一直显示loading...页面?
比如页面上有一些图片,有不少js脚本。 希望实现的效果,打开连接的时候,一直显示loading...页面,然后全部加载完之后 再整个显示页面
欢迎选择我的课程,让我们一起见证您的进步~~
将javascript放在<head></head>中执行
javascript
<head></head>
<html> <head> <script type="text/javascript"> aaa();//直接调用,就在页面加载前执行了,但是此时不能访问任何一个document控件 function aaa(){ alert(1); } </script> </head>
希望这篇文章对你有帮助:js网页Loading效果,让页面加载完再显示
提供一个思路:<body> 顶部放一个 position:fixed 的 loading 遮罩,覆盖整个页面。 然后用 JS 在 onload 事件里把这个遮罩隐藏掉就行了。
<body>
position:fixed
onload
<html> <head> <title>Test</title> <style> .loading { position:fixed; width:100%; height:100%; } </style> </head> <body> <p class="loading">Loading</p> <p>下面放要放的内容</p> <script> window.onload=function(){ $(".loading").fadeOut(); } </script> </body> </html>
应该是这样,我都忘了
我习惯 p 加层 你也可以试试
如果只是简单的loading图,没有进度的效果,前方的同僚都回答到了!
如果需要进度或百分比,就不得不推荐这一神器了
pace.js
反正是很神奇,很牛逼...
<!DOCTYPE > <html lang="zh-CN"> <head> <title>正在载入</title> <meta http-equiv="Content-Type" content="text/html; charset=" gb2312 "> <meta charset="utf-8 "/> </head> <body bgcolor="#FFFFFF " leftmargin="0 " topmargin="0 "> <table border=0 cellpadding=0 cellspacing=0 width="100% " height="100% "> <tr> <form name=loading> <td align=center> <p><font color=gray>正在载入首页,请稍候.</font></p> <p> <input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:gray; background-color:white; padding:0px; border-style:none; "> <br> <input type=text name=percent size=46 style="font-family:Arial; color:gray; text-align:center; border-width:medium; border-style:none; "> </p> </td> </form> </tr> </table> <script>var bar = 0 var line = "|| " var amount ="|| " count() function count(){ bar= bar+2 amount =amount + line document.loading.chart.value=amount document.loading.percent.value=bar+"% " if (bar<99) {setTimeout("count() ",100);} else {window.location = "目标页 ";} } </script> </body> </html>
我也需要这个
将
javascript
放在<head></head>
中执行希望这篇文章对你有帮助:js网页Loading效果,让页面加载完再显示
提供一个思路:
<body>
顶部放一个position:fixed
的 loading 遮罩,覆盖整个页面。然后用 JS 在
onload
事件里把这个遮罩隐藏掉就行了。应该是这样,我都忘了
我习惯 p 加层
你也可以试试
如果只是简单的loading图,没有进度的效果,前方的同僚都回答到了!
如果需要进度或百分比,就不得不推荐这一神器了
pace.js
反正是很神奇,很牛逼...
我也需要这个