How do I know when controls are fully loaded?

8 posts, 0 answers
  1. Mark Griebling
    Mark  Griebling avatar
    129 posts
    Member since:
    Dec 2005

    Posted 16 Nov 2008 Link to this post

    I would like to hide my entire page until all the controls are fully loaded - including images.  When using the old Rad Controls for ASP.Net, I simply used a div to show a 'loading' message.  I then registered a startup script which hid the div and displayed the main form.  This worked great.

    With Rad Controls for ASP.Net Ajax, I find that this does not work.  The startup script is executed long before the images are loaded.  This results in the page 'building' up as it loads images for the menu, toolbar, tree, panels and tabs.  I've tried using the menu OnClientLoad event and the window.onload event, but these events execute before the images are loaded. 

    My question is:  How do I know when are the controls are fully loaded and displayed?

    Thanks.
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 17 Nov 2008 Link to this post

    Hi Mark,

    You try the Sys.Application.load event to achieve your goal. The window.onload event is loaded after the page has finished loading. I am not sure if this occurs before or after images have been loaded. OnClientLoad of RadMenu occurs at the end if the initialization of RadMenu's client-side object.

    All the best,
    Albert
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark Griebling
    Mark  Griebling avatar
    129 posts
    Member since:
    Dec 2005

    Posted 17 Nov 2008 Link to this post

    I've tried both Sys.Application.load and onload and they both fire before the images are loaded. 

    When the menu OnClientLoad fires, the menu object is loaded, but the images are not.  I can see that by setting a breakpoint on the OnClientLoad and drilling down the menu to see the image complete state is false. 
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 17 Nov 2008 Link to this post

    Hello Mark Griebling,

    Using window.onload worked fine on my end. Please find attached my test page:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head id="Head1" runat="server"
        <title>test</title> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="SC1" runat="server"
            </asp:ScriptManager> 
            <telerik:RadMenu runat="Server" ID="RadMenu1"
                <Items> 
                    <telerik:RadMenuItem ImageUrl="http://www.google.com/intl/en_ALL/images/logo.gif" Text="Google"></telerik:RadMenuItem> 
                </Items> 
            </telerik:RadMenu> 
             
            <script type="text/javascript"
            window.onload = function () 
            { 
                alert(document.images[0].complete); 
            } 
            </script> 
        </form> 
    </body> 
    </html> 

    Regards,
    Albert
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Mark Griebling
    Mark  Griebling avatar
    129 posts
    Member since:
    Dec 2005

    Posted 17 Nov 2008 Link to this post

    Yes, in the simple cases it works fine.  The problem occurs when you have many images and are accessing a remote server.  To simulate:

    1) Create a menu with many items.
    2) Only show the alert when the image is not complete. 

    3) Test NOT in a debug session.
    4) Clear your browser cache before each attempt.

    5) Use Fiddler with the setting Simulate Modem Speeds.
    6) If on your local machine, use the ip address, not localhost (for fiddler).

    Mark

  7. Mark Griebling
    Mark  Griebling avatar
    129 posts
    Member since:
    Dec 2005

    Posted 17 Nov 2008 Link to this post

    Here is a simplified version of my current workaround.  The real code is more complex as I am waiting for a main menu, 5 context menus and a toolbar to load.  This still does not account for background images, etc on the toolbars, panels, etc.

    <telerik:RadMenu ID="rmnuMain" runat="server" EnableViewState="False" EnableAjaxSkinRendering="False" 
                OnClientItemClicked="onmenuitem" CausesValidation="False" OnClientItemOpen="closecontextmenus" 
                OnClientLoad="assignM1">  
     

    function assignM1(sender)  
    {  
        m1_ = sender;  
        checkLoaded();  
    }  
    function checkLoaded()   
    {  
         if (imagesMenuLoaded(m1_))  
         {  
             document.getElementById('loadingmain').style.display = 'none';  
             document.getElementById('f1').style.display = '';  
         }  
         else   
         {  
             // sleep for a bit and try again  
             setTimeout(function() {  
                    checkLoaded();  
                }, 200);  
         }  
    }  
    function imagesMenuLoaded(mnu)   
    {  
        var item = null;  
        for (i = mnu._childListElement.all.length-1; i >= 0; i--)   
        {  
            item = mnu._childListElement.all[i];  
            if (item.tagName == "IMG")   
            {  
                if (!item.complete)  
                    return false;  
            }  
        }  
        return true;  
    }  
     
     

    I would prefer something builtin to the controls so it works uniformly, but I really don't have time to wait.  If you have a better solution or I am missing something, I would appreciate it.

    Mark
  8. MB
    MB avatar
    149 posts
    Member since:
    Jan 2005

    Posted 18 Nov 2008 Link to this post

    Not that it's exactly the answer to the question, but window.onload is unreliable. It works MOST of the time with IE, but  FireFox and Safari offer really flaky support, while Opera and others don't support it at all.

    The best solution I've come accross for telling if the DOM Content is all loaded, is this:

    http://www.thefutureoftheweb.com/blog/adddomloadevent

    I use it on a lot of my pages that contain Telerik controls, so I know when the page is loaded and safe for me to start modifying the DOM... and I'm yet to have a problem with any browsers I've encountered.

    As I said... not really the answer to the question, but something perhaps Terlerik could look at, and including something similar into the API as a standardised function.
  9. Mark Griebling
    Mark  Griebling avatar
    129 posts
    Member since:
    Dec 2005

    Posted 18 Nov 2008 Link to this post

    Thanks for the link.  I will look into it.  I agree, it would be nice for Telerik to incorporate something like that.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017