Solved

Rendering Order of content vs. master in Master Page arrangement causes flash

Posted on 2014-04-28
3
264 Views
Last Modified: 2014-05-14
Hello,

I have a nested MasterPage arrangement.  On the top master page I have a menu across the top and a panel control down the right. On the inner master page, I have a menu across the top and then a panel which occupies most of the left bottom portion of the screen.  When the page renders, the panel on the right hand side of the top master first appears on the left hand side of the screen in a flash. Then, when the nested master page appears with its content, the panel moves into its correct position along the right side of the screen.  I want to get rid of the right panel's initial flash appearance on the left. The panel has a couple of grid controls in it with data.  The main content on the left is also displaying data.  The panels are float left and float right to allow them to be side by side and have a 75%/25% sizing.

I have tried using visibility or display attributes to delay the right panel's appearance via both script and server side.  But as I tried this and stepped through execution,  I realized that all of the code completes execution prior to the rendering and it appears to be something on the client that decides to show the master first and then the content.

I was thinking about changing the right hand panel to also be a content page.  However, a lot of code would have to be rewritten and I am wondering if it would be worth it because even then, there is no guarantee that I could force the left content to render before the right.

The grids in the right panel are in an updatepanel as well.  And, the menus are in update panels as well as the main content block.

I would just like to get some ideas on why the client isn't waiting until all of the content is ready and just display the controls where they belong in one shot and how I can affect the order of display to avoid the flash. Thanks!
0
Comment
Question by:azTop
  • 2
3 Comments
 
LVL 28

Assisted Solution

by:Ryan McCauley
Ryan McCauley earned 250 total points
ID: 40035881
The browser will render content as it receives it from the server, so you're correct in thinking that the render delay and flash you're seeing are something that's happening on the client. You may be able to set the layout a bit more precisely rather than using float to get it to appear in approximately the right spot when it's initially rendered, but the browser will still update things as all of the content is received.

The most direct way to address this is to adjust the amount of content you're sending to your browser - is there a way to shrink the page size? Is there a significant amount of white space when you do a "View Source" on the rendered page? Are there unnecessary elements you can remove or can move to an asynchronous panel that's refreshed after the initial load? If some content is being sent, and then IIS is waiting for an event before sending the rest, that delay could cause rendering issues. At very minimum, does your web server have content compression enabled?

There are some suggestions for troubleshooting this (or at least getting some more precise details on which portion of your page is causing the delays) at this Stackoverflow question:

http://stackoverflow.com/questions/1326870/asp-net-web-site-delay-in-page-load
0
 

Accepted Solution

by:
azTop earned 0 total points
ID: 40054476
Thanks for your help. You have given me additional opportunities for improvement, which is appreciated.

In the end, I went back to iterate over the possible combinations of float, etc. and came up with a winner.

HorizontalAlign="Left" ( attribute ) and float:left; for the left panel. And, just HorizontalAlign="Right"  for the right panel.
0
 

Author Closing Comment

by:azTop
ID: 40064020
As stated above, the specific combination of attributes and float caused the panel to initially appear in its correct position.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Entering time in Microsoft Access can be difficult. An input mask often bothers users more than helping them and won't catch all typing errors. This article shows how to create a textbox for 24-hour time input with full validation politely catching …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
This video teaches users how to migrate an existing Wordpress website to a new domain.

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now