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

Question

假设当用户单击一个按钮并且网页将指向另一个网页时，在网页的加载和等待之间，我想显示一个进度对话框（类似于动画微调器），并且在另一个网页完全加载后它会消失.

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

Answer 1

如果您使用一些带有这样的文件结构的 jQuery，这很容易做到：

• firstpage.html（包含指向其他页面的链接）
• 第二页.html
• js（目录）
  • 你的脚本.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)

});