1

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

我有严重需要一些加载进度的图像菜单和循环库，不知道如何实现它们。该网站是http://techlipse.net。提前谢谢。

4

2 回答 2

2

有几种方法可以做到这一点。我会利用这样一个事实，即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>
于 2009-08-01T23:33:52.973 回答
0

您可以向加载事件添加一个侦听器...（不要直接绑定到事件中，因为您可能会导致不调用不同的绑定）

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

于 2009-07-31T13:10:20.567 回答