javascript中的页面掩码

pagemasking in javascript

本文关键字：掩码 javascript      更新时间：2023-09-26

在我的应用程序中，我使用菜单…当我点击菜单项时，特定的页面将在中心框加载。

问题是需要一点时间…现在我想显示一个屏蔽(消息，让用户知道页面正在加载)(如图所示)，直到页面加载如何在Javascript中做到这一点

示例代码:

<html>
<head>
<style>
  #content { display:none; }
</style>
<!-- Javascript that makes one div visible and hides another -->
<script type="text/javascript">
    function showhide() {
        document.getElementById("load").style.display = "block";
        document.getElementById("content").style.display = "none";
    }
</script>
</head>
<!-- calls the javascript function when the page is loaded -->
<body onload="showhide();">
<!-- div to be shown while the page is loading -->
<div id="load">
  <img src="http://www.photo-canvas.com/images/generic/loading_gif.gif" />
</div>
<!-- div to be shown when the page is loaded -->
<div id="content">
  [all the slow content]
</div>

谢谢 ........

这不是一个完整的答案，但你的showhide函数不应该是:

document.getElementById("load").style.display = "none";
document.getElementById("content").style.display = "block";

根据您正在加载的内容，这可能是也可能不是解决方案。例如，我认为(但可能是错误的)onload不考虑图像是否加载。它当然不会考虑AJAX内容。

也许实现这一点的更简单的方法是让初始页面只包含加载屏幕，其余内容由AJAX加载。使用jQuery，这很容易(这是一种简单的方法:http://api.jquery.com/load/)

相关文章：