Theme applied after a short delay.

Posted by Gerturo on March 10, 2006 at 11:59am

Hello,

I have just installed Drupal 4.6.5 on my website hosted with webhost4life which uses IIS as web server. Though the installation went flawless I experience one rather irritating issue. Apparently the theme is applied after a short delay meaning every page change results in an immediate update of the content in style-less HTML, and only after a second the content is formatted according to the theme. If you like you van witness this behaviour yourself through the following temporary URL: http://site333.mysite4now.com/gerturo/dplbertjammaer/index.php.

Is this issue a side-effect of using IIS? I know it is recommended to run Drupal on Apache, but I have already signed up with webhost4life and if possible want to avoid switching to a different hosting provider. Has anyone else experienced the same issue, and is there a simple solution for it? Is the issue caused by IIS, or is there some setting I should apply?

Regards,

Gert.

Comments

Browser

Posted by geodaniel on March 10, 2006 at 12:05pm

To me that sounds more like a browser issue related to the loading of CSS rather than an issue with Drupal itself or even your hosting. I'm not seeing this issue loading your site from Firefox though it does happen when I load it for the first time in IE.

I also have a feeling that

Posted by gabriella on March 10, 2006 at 12:14pm

I also have a feeling that this is related to IE loading the css (I don't use IE my self but I have seen this happen sometimes on different sites with IE)

I think I saw a post related to this a couple of weeks ago, but cannot find it now...

I believe this is the horrid

Posted by US421 on March 10, 2006 at 2:34pm

I believe this is the horrid Flash of Unstyled Content bug in IE. This could be avoided by having a link to a stylesheet in your document head. I am not able to post suggestions here despite using code tags, beware the evil stylesheet links, but this is explained at http://bluerobot.com/web/css/fouc.asp

Yep, IE is causing the delay.

Posted by Gerturo on March 10, 2006 at 1:09pm

Thanks for the quick replies on my first message on this site! I have just installed Firefox and indeed the problem doesn't occur when viewing my site with this browser. Can it be that the combination IIS-PHP-IE is the issue as other Drupal sites including this very page run just fine in IE. If this is the case I assume I have to switch to Apache.

Regards,

Gert.

I run IIS/PHP/MySQL and

Posted by sepeck on March 10, 2006 at 4:58pm

I run IIS/PHP/MySQL and don't have the issue.

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain

-Steven Peck
---------
Test site, always start with a test site.
_{Drupal Best Practices Guide -|- Black Mountain}

this is a msie issue

Posted by jadwigo on March 10, 2006 at 2:09pm

google "flash of unstyled content" ..

FOUC: Flash of Unstyled Content

Posted by gabriella on March 10, 2006 at 2:30pm

Thanks for your tip jadwigo, this is form one of the links that search resulted in - From Community MX

FOUC: Flash of Unstyled Content
Internet Explorer for Windows will sometimes display a page momentarily without the styles applied. Then suddenly, the styles pop into view. This is caused when the styles are linked to the page using the @import method.

When this is done, it appears that IE/Win does not wait until the styles arrive from their @imported location, but displays the HTML immediately without the styles.

Once the styles finally do load, they are applied to the page.
The way to prevent this is by having at least one [link> element in the head element of the page. When IE sees a <link> element, it waits until all remote files arrive before rendering the page. It's not necessary for the <link> to have a target file.

Just the presence of the <link> element is enough. A <script> element in the document head will also eliminate the problem.

flash of unstyle content

Posted by sangamreddi on March 10, 2006 at 2:36pm

keep this code in the head section

[script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script]

Replace '[ ]' with angular brackets drupal didn't allow me to post with angular brackets.

Sunny
www.gleez.com | www.sandeepone.com

Simple FOUC Fix

Posted by As If on March 12, 2006 at 4:02pm

I'm running a mod of the 'Blix' theme at www.GettingPrimitive.com and the site was suffering from the FOUC problem. The best place to put the fix seems to be in includes/common.inc. Here's how:

Just before the line:
return $output . drupal_set_html_head();

Put a line like this:
$output .= ' [script type="text/javascript"] [/script]';

(Replace the squarebrackets with anglebrackets, just like Sunny said).

-------------------------------------------
Interactive Worlds and Immersive Obsessions
www.asifproductions.com

-------------------------------------------
Interactive Worlds and Immersive Obsessions
http://www.asifproductions.com

Or modify theme.inc and change @import to link

Posted by rubicon on May 4, 2006 at 7:36pm

Another option is change the theme_stylesheet_import() function in includes/theme.inc to use the <link> method instead of the @import method.

According to my research @import is used to provide backward compatibility with IE4 and Navigator4. Removing @import resolved the CSS delay in IE and did not have any negative effects on current versions of Safari, Firefox, and Opera.

Where to put the FOUC remedy

Posted by Sven H on July 1, 2008 at 12:16pm

Hi folks,

I have been trying to get rid of the FOUC but have so far been unsuccesfull. I have been unable to put it in the spot where it does its job...

Could any of you specify what line of code needs to be placed where in which drupal file (drupal 5.7)? f.i. do I need to replace ALL @import commands with [link] like the folowing:

drupal_set_html_head('[style type="text/css" media="all"]@import "'. base_path() .'misc/maintenance.css";[/style]');
to
drupal_set_html_head('[style type="text/css" media="all"][link] "'. base_path() .'misc/maintenance.css";[/style]');

Many thanks in advance!
Sven

FOUC remedy in page template

Posted by As If on July 2, 2008 at 12:35am

You can do it as HTML in the page template if you want to. Inside the HEAD section. Like this:
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>

-------------------------------------------
Interactive Worlds and Immersive Obsessions
http://www.asifproductions.com

Where is the head section?

Posted by Sven H on July 2, 2008 at 7:46am

Thanks for the reply!

As a website newbie, I haven't got a clue where the head section is...
Is it in a template, in includes?

Putting it in place once I know the location will go just fine.

<HEAD>

Posted by As If on July 2, 2008 at 8:16am

In the page.tpl.php file for your theme, anywhere between the <HEAD> and </HEAD> tags.

-------------------------------------------
Interactive Worlds and Immersive Obsessions
http://www.asifproductions.com

Mmm, that file is virtually empty...

Posted by Sven H on July 2, 2008 at 9:06am

And there is no [head] tag there...

Can the part that holds the [head] tag be imported from yet another file?

possible

Posted by As If on July 2, 2008 at 9:38am

It could be, but even so it would still probably be a tpl.php file located in the folder of your theme. When you do a View Source on your page (in your browser), I'm sure you will see the HEAD tags. It's just a matter of finding the template file responsible for putting them there.

-------------------------------------------
Interactive Worlds and Immersive Obsessions
http://www.asifproductions.com