Question

asp.nt ascx控件是否有可能有自己的客户端加载事件，比如每个窗口加载事件，所以我可以隐藏加载div并在http传输完成时显示内容div。

我有图片菜单和周期画廊，严重需要一些加载进度，不知道如何实现它们。该网站是http://techlipse.net。 Thx提前。

Answer 1

有几种方法可以做到这一点。我会利用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()事件。当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>

Answer 2

你可以为load事件添加一个监听器......（不要直接绑定到事件中，因为你可能会导致不同的绑定而不被调用）

尝试使用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发送给长时间运行的进程。

ASCX控件和window.onload函数

2 个答案: