asp.nt ascx 控件是否有可能拥有自己的客户端加载事件,例如每个的 window.onload,所以我可以隐藏加载 div 并在 http 传输完成时显示内容 div。
我有严重需要一些加载进度的图像菜单和循环库,不知道如何实现它们。该网站是http://techlipse.net。提前谢谢。
asp.nt ascx 控件是否有可能拥有自己的客户端加载事件,例如每个的 window.onload,所以我可以隐藏加载 div 并在 http 传输完成时显示内容 div。
我有严重需要一些加载进度的图像菜单和循环库,不知道如何实现它们。该网站是http://techlipse.net。提前谢谢。
有几种方法可以做到这一点。我会利用这样一个事实,即onload
在页面上的所有内容完全加载之前不会触发事件。因为看起来您的网站已经在使用 jQuery,所以下面的所有示例都将使用它。
在您的用户控件中,您可以将它们默认隐藏。为此,style
请在控件的包装标记中放置一个属性:
<div style="display: none">
<!-- Optionally you could use "visibility: hidden"
instead of "display: none". This will keep the
control's placeholder, but not physically show it to the user.
-->
<!-- Your control content here -->
</div>
在您的控件内部,您可以拥有这样的 JavaScript 代码(假设 jQuery 将包含在页面顶部,这就是您的网站现在的方式)。这将直接置于您的控制之下。
<script type="text/javascript">
$(window).load(function() {
$("#" + <%= this.ClientID %>).css("display", "block");
// If you chose to use visibility, try the following line instead
//$("#" + <%= this.ClientID %>).css("visibility", "visible");
});
</script>
为了解释这是如何工作的......
当浏览器最初加载页面时,控件默认为隐藏。它根本不会被渲染。jQuery 订阅load()
您页面的事件。当加载事件触发时,它将显示控件。这仅在所有内容加载完成后才会发生。
您还可以<div />
在此加载事件中隐藏任何“正在加载...”。
另一种选择可能更好,这取决于您在做什么,是构建您的页面,以便您拥有 2 个主要 div。一个“正在加载”的 div 和一个“内容”的 div。默认情况下,加载 div 将显示通用加载消息。默认情况下,内容 div 将被隐藏(或者只是隐藏在下面的示例中)。该onload
事件从页面中删除加载对象并允许显示图像。
下面的示例在整个页面顶部显示加载消息,直到完成加载。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Loading Test</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden/* Prevent user from scrolling. */
} /* Scrolling is re-enabled on load by JavaScript */
.loadingBackground {
background: #000;
filter: alpha(opacity=70); /* internet explorer */
-khtml-opacity: 0.7; /* khtml, old safari */
-moz-opacity: 0.7; /* mozilla, netscape */
opacity: 0.7; /* fx, safari, opera */
height: 100%;
width: 100%;
position: absolute;
}
.loadingWrapper {
position: absolute;
top: 15%;
width: 100%;
}
.loading {
margin: 0 auto;
width: 300px;
text-align: center;
background: #ffffff;
border: 3px solid #000;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('.loadingBackground, loadingWrapper, .loading').fadeOut('normal');
$('body').css('overflow', 'auto');
});
</script>
</head>
<body>
<div class="loadingBackground"></div>
<div class="loadingWrapper">
<div class="loading">
Please Wait...<br />
<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/30-1.gif" />
</div>
</div>
<!-- Large Images included to increase load time to show the loading effect -->
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3c/KillaryHarbour.jpg"
style="height: 100%; width: 100%" />
<img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/Ireland_-_Plains_of_South_Kildare.jpg"
style="height: 100%; width: 100%" />
</body>
</html>
您可以向加载事件添加一个侦听器...(不要直接绑定到事件中,因为您可能会导致不调用不同的绑定)
尝试使用 JS 库来帮助您收听事件,YUI,jQuery很有趣。
http://developer.yahoo.com/yui/event/#start
var oElement = document.getElementById("myBody");
function fnCallback(e) { alert("i am loaded"); }
YAHOO.util.Event.addListener(oElement, "load", fnCallback);
YUI 库有一种方法可以在某个区域“准备就绪”时进行监听
http://developer.yahoo.com/yui/event/#onavailable
您可以有一个监听器等待,以便查看何时加载 div,然后将一些 ajax 触发到您长时间运行的进程。