WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Digital Raindrops
    Member
    Posted 3 years ago #

    Hi Guys,
    It looks like they have found an answer over on the Artisteer forum to the page load flash that some websites are getting.

    This is the fix from their topic for the twenty ten or twenty eleven based themes.

    Steps:
    Create an empty file in the themes folder, print.css, this is an epmty file to stop log errors.

    Then in header.php find the line:

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

    Add a new line after to load the empty stylesheet.

    <link rel="stylesheet" type="text/css" media="print" href="<?php echo get_stylesheet_directory_uri() .'/print.css'; ?>" />

    So you should now have these lines and no flashing on page load, why it works no one knows, but it does!

    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="stylesheet" type="text/css" media="print" href="<?php echo get_stylesheet_directory_uri() .'/print.css'; ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

    If you are using a page cache, you might need to clear this for the change to work.

    Thanks and respect to the guys on the Artisteer forum!

    David

  2. Digital Raindrops
    Member
    Posted 3 years ago #

    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!
    http://digitalraindrops.net

    Regards

    David

  3. Digital Raindrops
    Member
    Posted 3 years ago #

    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

  4. Digital Raindrops
    Member
    Posted 3 years ago #

    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='http://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='http://localhost/wordpress32/wp-includes/js/l10n.js?ver=20101110'></script>
    <script type='text/javascript' src='http://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

  5. esmi
    Forum Moderator
    Posted 3 years ago #

    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.

  6. Digital Raindrops
    Member
    Posted 3 years ago #

    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

  7. eddiejanzer
    Member
    Posted 3 years ago #

    site running most recent version of WordPress, 3.21
    http://antiquetemplates.com/demo-six/bamboo-coffee-table
    Below is the same "site", same host (Rackspace), running a less recent version of WordPress
    http://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

  8. eddiejanzer
    Member
    Posted 3 years ago #

    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.

  9. Digital Raindrops
    Member
    Posted 3 years ago #

    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', 'http://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

  10. Nisien
    Member
    Posted 3 years ago #

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

  11. Ruth Maude
    Member
    Posted 3 years ago #

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

  12. Knight Fight
    Member
    Posted 3 years ago #

    That worked like a charm, cheers!

  13. birdsong16
    Member
    Posted 3 years ago #

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

  14. c12281
    Member
    Posted 3 years ago #

    @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...

  15. Tb5
    Member
    Posted 3 years ago #

    @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.

  16. valerio-d
    Member
    Posted 3 years ago #

    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.

  17. vifa
    Member
    Posted 2 years ago #

    Thanks David!!!
    Had problems with both the flash and the content of pages moved a bit when loading. This fix solved it all.

  18. vismic
    Member
    Posted 2 years ago #

    I get this error, when inserting the above code into functions.php: Fatal error: Call to undefined function add_action() in /var/www/vhosts/tinnethorup.dk/httpdocs/wp-includes/functions.php on line 2896

    Can anyone explain why?

    Thanks in advance :-)

    NOTE: I was inserting the code in the wrong functions-file - should have been in the functions-file in the themes folder. Didn´t work anyway though,

  19. coffee_king
    Member
    Posted 2 years ago #

    David
    Sorry, but what/where is the STYLESHEET CALL?

  20. MickeyRoush
    Member
    Posted 2 years ago #

    Sorry, but what/where is the STYLESHEET CALL?

    It's usually located near the top of your theme's header.php file.

  21. linux garage
    Member
    Posted 2 years ago #

    I am going to try adding the print.css to my root directory. I am using BlueHost and I think the root directory is in MyPhpAdmin. Is this correct? I have taken a look inside MyPhpAdmin and I have no idea what to do. Can anyone help here?

    Thanks

  22. bh_WP_fan
    Member
    Posted 2 years ago #

    The root directory is not in PHPMyAdmin. It is going to be the same place that your files are installed to, and the same place where your files like index.php and wp-config.php and wp-settings.php are.

    If this is your main domain, it will probably be something like public_html . If this is an addon domain, it will be something like public_html/addonfolder (where addonfolder is the name of your addon domain).

  23. linux garage
    Member
    Posted 2 years ago #

    @bh_WP_fan

    I read somewhere the root directory for WordPress was in MyPhpAdmin and it did seem very complicated. Yep! In tiny print but BlueHost states the public directory is the root directory. Indisputable.

    I'll give it a try now :)

    Thanks so much for your reply.

  24. Rainvur Jefferson Wilbre
    Member
    Posted 2 years ago #

    @ Member: valerio-d (posted 2 months ago)

    "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 also used the stahualpa theme for a while, and found that there was a flicker on IE page load.

    I somewhat recently tried out MagazinePremium by Bavotasan, and that one does not have a flicker with the jQuery Fix, and is a real good theme, for the type of person that likes something like Atahualpa. He has a free edition to test out if your might like to buy the premium which I thought was worth it and I've looked at a number of them.

  25. Mark Louie "espidesigns" Espedido
    Member
    Posted 2 years ago #

    @david after a day of looking for the perfect fix, finally i've found your jquery solution! i thought it was css related or uncached content. good job on finding the solution for the lot of us.

  26. dwzemens
    Member
    Posted 2 years ago #

    The javascript downgrade doesn't work for me nor do any other solutions other than turning off javascript completely, which solves the problem.

    Any new ideas on how to resolve this issue? Thanks!

    Here's the site that flashes on each page reload:
    http://stjoesworkshop.com/newsite/

  27. LasseClaes
    Member
    Posted 2 years ago #

    Beginning to think in terms of "this is feature" and "phase 2"-solutions I think I just got rid of my flickering issue - after a struggle:

    I think there are several reasons this could happen.

    1. I cleared whitespace after my ending HTML in footer.php (I am not sure that it helped, but I've convinced myself that it flickered on every page load before that (I really didn't need to check it that much...), and afterwards it just flickered occassionally on different page loads (no pattern I think...)

    2. Did same thing to wp-config.php (end) (end - I think that fixed it for me on another project (or maybe it was a white pages all over issue that fixed) - and to header.php (beginning). Although I am not sure this helps, I like to keep things clean.

    3. The great difference (no flickering!) - and that could be the case for you dwzemens - was when I changed the order of .css and .js loads. wp_enqueue_script (or something like that - if you use it properly should take care of that - or maybe you can change the order in the header.php.)
    I guess css-files should be loaded before js-files. Also some js-files are dependent on that other libraries are loaded - i.e- load jQuery before fancybox and so on.

    And still you might have the problem because background-images can take some time to load and thus js loads before css. in that case see if this helps: http://stackoverflow.com/questions/7411541/how-to-prevent-the-white-flash-on-page-load-created-by-background-image-loadin helps.

    Hope this helps someone.

  28. dwzemens
    Member
    Posted 2 years ago #

    Thanks LasseClaes. I am struggling to try and get the js loaded in the footer by using wp_enqueue_script, but with little success so far. I'm using Genesis with a child theme and amnot quite certain how to accomplish it.

  29. LasseClaes
    Member
    Posted 2 years ago #

    Oh - btw. You may also want to check the Firebug console (or Chrome developer tools -> concole) once in a while. Errors here can also make content flash so they should be fixed. And - from experience - using @font-face you need to have the fonts set up for all browsers (font-squirrel has a generator for that). Just saying that CSS-related things (though loadign some fnts here) also can cause this.

    dwzemens - check your console log and let me know how you are doing (and the code for loading) the scripts in the footer) ehen you figure that out. thanks.

  30. dwzemens
    Member
    Posted 2 years ago #

    Based on a suggestion from another forum, I added this to my functions.php file

    function my_enqueue_scripts() {
    	wp_enqueue_script('custom-js',
    		get_stylesheet_directory_uri() . '/lib/js/custom.js',
    		array('jquery'),
    		'1.0',
    		true
    	);
    }
    add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

    Not sure why it works, because the .js file referenced in the footer is not an actual file, but for some reason this stops the flash completely.

    Weird.

    If anyone can explain why I'd love to hear it.

Topic Closed

This topic has been closed to new replies.

About this Topic