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

How to create a progress dialog when switching the webpages?

本文关键字：创建 对话框 网页      更新时间：2023-09-26

假设当用户点击一个按钮时，网页将直接跳转到另一个网页，在网页加载和等待之间，我想显示一个进度对话框(类似于动画旋转器)，它将在另一个网页完全加载后消失。

我将如何通过使用HTML, Javascript和CSS做这样的事情?在第一个网页，我知道怎么做，但我不知道如何显示进度对话框立即当第二个网页正在加载。任何想法?最欢迎例举!

如果使用一些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)
});
相关文章：