如何在切换网页时创建进度对话框？

Question

让我们说当用户点击一个按钮并且网页将指向另一个网页时，在加载和等待网页之间，我想显示一个进度对话框（类似于动画微调器），它会在另一个网页后消失满载。

如何使用HTML，Javascript和CSS做这样的事情？在第一个网页上我知道该怎么做，但我不知道如何在加载第二个网页时立即显示进度对话框。任何的想法？最受欢迎的例子！

Answer 1

如果使用一些jQuery，这很容易 使用这样的文件结构：

• firstpage.html（包含指向其他页面的链接）
• secondpage.html
• js（目录）
  • yourscript.js
  • 的jquery.js

在secondpage.html中加入<script src="js/jquery.js></script>和<script src="js/yourscript.js></script>。 将其添加到secondpage.html：

<div id="loading_screen"></div>

和CSS

#loading_screen {
width: 100%;
height: 100%;
background: /*any image, color, w/e*/;
}
/* don't forget that if you want the loading screen to fit full page,
* you'll have to set body, html to margin, padding = 0 & width, height = 100% */

在yourscript.js（重要部分）：

$(document).ready(function() {
var loadingscreen = $('#loading_screen');
var timeToLoad = 1000; /* in miliseconds, 1000 = 1 second */

setTimeOut(function() {
loadingscreen.hide();
// or if you prefer removing it completely from the DOM: loadingscreen.remove();
}, timeToLoad)

});