ASCX控件和window.onload功能
[英]ASCX controls and window.onload function
问题描述
Is it possible for asp.nt ascx controls to have their own client side load event, like a window.onload for each, so I can hide the loading divs and show the content div when http transfer is complete. 
asp.nt ascx控件是否有可能具有自己的客户端加载事件，如每个window.onload，因此我可以隐藏加载div并在完成HTTP传输后显示内容div。
I have image menus and cycle galleries that seriously need some loading progress don't know how to implement them. 我有图像菜单和自行车通道，它们非常需要一些加载进度，但不知道如何实现它们。 The site is http://techlipse.net . 该网站是http://techlipse.net 。 Thx in advance. 提前谢谢。
2 个解决方案
解决方案1
1 2009-08-01 23:33:52
There are a few ways you can do this. 有几种方法可以做到这一点。 I would take advantage of the fact that the onload event is not triggered until all content on the page is completely loaded. 我会利用以下事实：在页面上的所有内容都完全加载之前，不会触发onload事件。 Since it looks like your site is already using jQuery, all of the examples below will use that. 由于您的网站似乎已经在使用jQuery，因此下面的所有示例都将使用它。
In your user controls, you can have them hidden by default. 在用户控件中，您可以默认隐藏它们。 To do this, place a style attribute in a wrapper tag for your control: 为此，请将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>
Inside of your control, you can then have JavaScript code like this (assuming jQuery will be included at the top of the page, which is the way your site is now). 然后，在控件内部，您可以具有这样的JavaScript代码（假设jQuery将包含在页面顶部，这是您现在的网站的方式）。 This would be placed directly in your control. 这将直接放置在您的控件中。
<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>
To explain how this works... 为了解释这是如何工作的...
When the browser initially loads the page, the control defaults to being hidden. 当浏览器最初加载页面时，该控件默认为隐藏。 It will not be rendered at all. 它将不会被渲染。 jQuery subscribes to the load() event of your page. jQuery订阅页面的load()事件。 When the load event triggers, it will then display the control. 当加载事件触发时，它将显示控件。 This only happens once everything is finished loading. 仅在所有内容加载完成后才会发生这种情况。
You can also hide any "loading..." <div /> in this load event also. 您也可以在此load事件中隐藏任何“ loading ...” <div /> 。
Another option, which may be better depending on what you're doing, is to structure your page so you have 2 main divs. 另一个选择可能更好，具体取决于您正在执行的操作，该方法是构建页面结构，以便您有2个主要div。 A "loading" div and a "content" div. “加载” div和“内容” div。 The loading div would be shown by default with a generic loading message. 默认情况下，将使用通用加载消息显示加载div。 The content div would be hidden by default (or just hidden behind an overly like my example below). 默认情况下，内容div是隐藏的（或仅隐藏在下面的示例中）。 The onload event removes the loading objects from the page and allows the images to be shown. onload事件从页面中删除加载对象，并允许显示图像。
This example below displays a loading message over top of the entire page until it is finished loading. 下面的示例在整个页面顶部显示加载消息，直到完成加载为止。
<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>
解决方案2
0 2009-07-31 13:10:20
You can add a listener to the load event... ( don't tie into the event directly as you might cause a different tie in to not be called ) 您可以在load事件中添加一个侦听器...（不要直接绑定到该事件中，因为这可能会导致不同的绑定不被调用）
Try using a JS library to help you listen to events, YUI , jQuery are fun. 尝试使用JS库来帮助您监听事件， YUI和jQuery很有趣。
http://developer.yahoo.com/yui/event/#start 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 Library has a way to listen to when an area is "ready" YUI库提供了一种在区域“就绪”时进行收听的方法
http://developer.yahoo.com/yui/event/#onavailable http://developer.yahoo.com/yui/event/#onavailable
You could have a listener that waits so see when a div is loaded, and then fire off some ajax to your long running processes. 您可能有一个等待的侦听器，以便查看div的加载时间，然后为长时间运行的进程触发一些ajax。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.