How-to: Fix the flash on page load 3.2.x (FOUC)

This does not seem to work as well as I thought!

I revisited the post on Artisteer, and they are saying that the print.css has to go in the WordPress root directory, so the link would then be.
<link rel="stylesheet" type="text/css" media="print" href="/print.css" />

I am not sure but I think the initial load times on my pages has improved, I do get a flash but not as much.

I have it done here, not convinced, the adSense animated blocks in IE9 have been playing up as well, I wonder if it is a query script issue!
https://digitalraindrops.net

Regards

David

I am begining to think that it is a browser problem with Internet Explorer

I tested my website with IE vs FF, and Firefox loaded the initial part before anything else is loaded in half the time 0.4 vs 0.8, Firefox was a second faster overall.

Internet Explorer

FireFox

David

I have been testing on a twenty ten based theme, local host, disabled all plugins.

Load the page no flash, one wordpress /js/ script line.

<script type='text/javascript' src='https://localhost/wordpress32/wp-includes/js/l10n.js?ver=20101110'></script>

Activated Google Fonts, flash on the first call to the script, then no flash on any page or post.

Activated a plugin that calls that fetched the scripts from the wordpress and the plugin, and I get the flash on some pages and posts.

Looking at the page source and we have these to lines calling wordpress /js/ scripts, are these conflicting or am I just off base.

What I do know that it only takes IE and one plugin that uses jQuery to cause this on my local install, more testing and it is when these two lines are in the header.

<script type='text/javascript' src='https://localhost/wordpress32/wp-includes/js/l10n.js?ver=20101110'></script>
<script type='text/javascript' src='https://localhost/wordpress32/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>

Disabled the plugin and added adsense and like button code no flash!

This is only a problem with Internet Explorer other browsers are ok!

I am only starting to look at jquery, so do not have the skills to say this is the reason.

HTH

David

Last time I tried to sort out the “white flash with js” in IE, I just ended up hitting my head on a brick wall. Admittedly, that was about 2 years ago but I’m still pretty convinced that this is an issue that is deep within the IE rendering engine.

I would not know where to start with that one, just doing a bit of digging that may help, something in WordPress 3.2 has upset the IE rendering engine, it might be someting as simple as an invalid character.

It is only when the two libraies load, l10n.js loads first then jquery.js, that IE gets upset.

Twenty Eleven loads just the one file ‘l10n.js’, but most of the plugins I tested load both the files wp_enqueue_script('jquery'); so is it the order they load or something as silly as that?.

Maybe 110n.js needs to be loaded last in a function with an action, that is what I have had to do with the twenty eleven child theme styles.

add_action( 'wp_enqueue_scripts', 'function-name', 11 );

David

site running most recent version of WordPress, 3.21
https://antiquetemplates.com/demo-six/bamboo-coffee-table
Below is the same “site”, same host (Rackspace), running a less recent version of WordPress
https://antiquetemplates.com/demo-five/bamboo-coffee-table

There is a “flash” on page load issue with most recent version of Wordprss. I use a mac and the issue is most obvious on safari, and to a lesser extent, firefox. The two sites above are exactly the same files, server plugins. Everything is the same but the version of WordPress

It is definitly the upgrade. I just addressed it at one of my sites, and installed a version of WordPress that was updated a couple weeks ago. Flash on page load ceased.

Hi All,
Following up from this one, I just tried an answer from the Artisteer Forum, putting an empty script call just before the stylesheet call.

<script type=”text/javascript”></script>

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

It has worked for me on my website, cutting the initial load by 0.6 of a second.

There is also a more drastic solution on another website answer about downgrading the version of jquery, which is where my testing pointed to.

For anyone using jQuery Tools in conjunction with a WordPress website, you’ll notice that WP 3.2 causes problems. This is because WP 3.2 automatically loads jQuery 1.6.1, whereas WP 3.1 loaded jQuery 1.4.4.

If you’ve upgraded to WP 3.2 and need a quick fix, try adding this to your functions.php:

Untested:

// Downgrade to jQuery 1.4.4 in order to support jQuery Tools
function downgrade_jquery() {
        global $wp_scripts;

        // We want to use version 1.4.4 of jQuery, but it may break something in the admin so we only load it on the actual site.
        if ( !is_admin() ) :
                wp_deregister_script('jquery');
                wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', false, '1.4.4');
        endif;
}
add_action( 'wp_head', downgrade_jquery() );

HTH

David

David, thanks for sharing the jQuery fix, it solved the problem!!!

Thanks that almost fixes the problem… it now flashes with the site background colour – much better than white!

That worked like a charm, cheers!

Thank you David, for providing the code to downgrade jQuery. That fixed my “white flash”. What a relief! I owe you a beer.

@eddiejanzer – I too have found the problem is with WP 3.2.1 upgrade. Where did you find the later version you referenced? I do not want to play around with code. Hoping WP comes out with a bug fix soon. Happens for all of my 3.2.1 sites in every browser. Not very professional looking…

@digital raindrops that did seem to work… after hours and hours of searching… finally some progress…

only problem is there is still a flash and some of the dynamic rollovers do not work…

i’ve seen many wordpress sites that the header stays static and only the content load… this whole, refresh on every click is terrible.

Hello I’ve added the jQuery fix but somehow doesn’t work… I’m using the atahualpa theme, not sure if this makes any difference (I’m a bit of a newbie so please forgive my lack of knowledge)

My site is here

any help/suggestion would be highly appreciated, this white flashing is driving me crazy.

Thanks a lot in advance.