Etienne
Etienne

Reputation: 7201

Loading of ASP.NET pages at first looks odd until everything is loaded

I am using ASP.NET 3.5 with JQuery, JS files, CSS files and lots of images for my background. For some reason when you first load your page everything is out of wack until you have finished loading everything on the page.

Thanks in advance!

Upvotes: 0

Views: 231

Answers (4)

Tim C
Tim C

Reputation: 70618

One method I have seen before is to embed the main content of the page in a div, which is initially set to be invisible

<div id="mainPageDiv" style="display:none;">
   <form id="form1" runat="server">
      ... Your content here...
   </form>
</div>

Then, on the page load event in javascript, you set the main div to be visible.

<body onload="document.getElementById('mainPageDiv').style.display='block';">

I am not sure exactly effective this would be though. One drawback would be the users would be present with a totally white screen for a short-while, possibly leading them to think there was a problem.

Upvotes: 0

cloggins
cloggins

Reputation: 669

The CSS styles are not being applied soon enough. If you refer to this post on google groups it advises to add the styles manually:

<ul class="ui-tabs-nav"> ... </ul>
<div class="ui-tabs-panel"> ... </div>

Upvotes: 0

Paul
Paul

Reputation: 5576

There are some things you can do to reduce the download time to minimise this problem.

You can minify your javascripts:

http://www.minifyjs.com/

reduce the amount of resources being downloaded by combining javascripts. You can also combine CSS files if possible.

The ySlow firefox plugin can analyse your site for you and give suggestions on some of the things you can do:

http://developer.yahoo.com/yslow/

You may also want to look at turning on GZIP compression if it is not already:

http://www.microsoft.com/technet/prodtechnol/WindowsServer2003/Library/IIS/25d2170b-09c0-45fd-8da4-898cf9a7d568.mspx?mfr=true

Upvotes: 1

NT_
NT_

Reputation: 2670

The reason is that CSS styles, scripts and images have not been fully downloaded. The browser shows HTML without styles and this is why you get the weird look. Once everything is downloaded and interpreted, everything suddenly falls into place.

You should somehow reduce the size of your dependencies ideally. Or use faster connection for your server, but the latter can be quite expensive.

Upvotes: 4

Related Questions