ansaurus

Question

ASCX controls and window.onload function

Answer 1

A:

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 )

Try using a JS library to help you listen to events, YUI, jQuery are fun.

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"

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.

BigBlondeViking 2009-07-31 13:10:20

Answer 2

A:

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. Since it looks like your site is already using jQuery, all of the examples below will use that.

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:

<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). 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. 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.

Another option, which may be better depending on what you're doing, is to structure your page so you have 2 main divs. A "loading" div and a "content" div. The loading div would be shown by default with a generic loading message. The content div would be hidden by default (or just hidden behind an overly like my example below). The onload event removes the loading objects from the page and allows the images to be shown.

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"&gt;
<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>

Dan Herbert 2009-08-01 23:33:52

ansaurus

tags:

views:

answers:

ASCX controls and window.onload function

related questions