Mark Griebling
Top achievements
Rank 1
Rank 1
Mark Griebling
asked on 17 Nov 2008, 02:28 AM
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.
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.
7 Answers, 1 is accepted
0
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.
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.
0
Mark Griebling
Top achievements
Rank 1
Rank 1
answered on 17 Nov 2008, 05:31 PM
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.
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.
0
Hello Mark Griebling,
Using window.onload worked fine on my end. Please find attached my test page:
Regards,
Albert
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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.
0
Mark Griebling
Top achievements
Rank 1
Rank 1
answered on 17 Nov 2008, 06:29 PM
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
0
Mark Griebling
Top achievements
Rank 1
Rank 1
answered on 17 Nov 2008, 07:22 PM
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.
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
| <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
0
MB
Top achievements
Rank 1
Rank 1
answered on 18 Nov 2008, 09:51 AM
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.
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.
0
Mark Griebling
Top achievements
Rank 1
Rank 1
answered on 18 Nov 2008, 03:50 PM
Thanks for the link. I will look into it. I agree, it would be nice for Telerik to incorporate something like that.