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>
关于asp.net - ASCX控件和window.onload函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1212408/