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

Question

假设当用户单击一个按钮并且网页将定向到另一个网页时，在网页的加载和等待之间，我想显示一个进度对话框(类似于动画微调器)并且它会在另一个网页之后消失已满载。

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

Answer 1

如果你使用一些 jQuery，这很容易做到使用这样的文件结构:

• firstpage.html(包含到其他页面的链接)
• secondpage.html
• js(目录)
  • 你的脚本.js
  • jquery.js

包括<script src="js/jquery.js></script>和 <script src="js/yourscript.js></script>在 secondpage.html 中。将此添加到 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)

});