Элементы управления ASCX и функция window.onload - PullRequest
Новая
       15

Элементы управления ASCX и функция window.onload

1 голос
/ 31 июля 2009

Возможно ли, чтобы элементы управления asp.nt ascx имели свое собственное событие загрузки на стороне клиента, например, window.onload для каждого, поэтому я могу скрыть div загрузки и показать div контента после завершения передачи по http.

У меня есть меню изображений и галереи циклов, которые серьезно нуждаются в некотором прогрессе загрузки, не знаю, как их реализовать. Сайт http://techlipse.net. Спасибо заранее.

Ответы [ 2 ]

1 голос
/ 02 августа 2009

Есть несколько способов сделать это. Я бы воспользовался тем, что событие 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 "loading" и div "content" Загрузка 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>
0 голосов
/ 31 июля 2009

Вы можете добавить прослушиватель к событию загрузки ... (не связываться с событием напрямую, так как это может привести к тому, что другой связывание не будет вызываться)

Попробуйте использовать библиотеку 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 для ваших долго выполняющихся процессов.

...