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

Posted on 2014-04-28
Medium Priority
Last Modified: 2014-05-14

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!
Question by:azTop
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
LVL 28

Assisted Solution

by:Ryan McCauley
Ryan McCauley earned 1000 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:


Accepted Solution

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.

Author Closing Comment

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

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

Thoughout my experience working on eCommerce web applications I have seen applications succumbing to increased user demand and throughput. With increased loads the response times started to spike, which leads to user frustration and lost sales. I ha…
Introduction A frequently used term in Object-Oriented design is "SOLID" which is a mnemonic acronym that covers five principles of OO design.  These principles do not stand alone; there is interplay among them.  And they are not laws, merely princ…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

752 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