1

I'm working on a site that has a lot of Javascript and jQuery--as far as I can tell most of it is triggered to load after the document is ready. However, when the page loads you get about a second of white FOUC. But if you disable Javascript completely, there is no white flash at all.

How can I make sure that the Javascript doesn't begin loading until after the page loads? It is already liberally using

 $(document).ready(function(){ /*. . .*/});

... so Javascript shouldn't fire until the page is done loading and is rendered... right? But somehow the page waits for the script to finish before rendering--even though it doesn't need to, since the page still looks mostly fine with Javascript totally disabled.

brentonstrine
  • 21,694
  • 25
  • 74
  • 120
  • 1
    $(window).load(function(){}) & put script tags at bottom of page they are in header – mikakun Jan 16 '13 at 18:46
  • 1
    "you get about a second of white FOUC" No, not from my location, using Opera 12 and Chromium 23. – feeela Jan 16 '13 at 18:46
  • @feeela That's weird. I'm using Chrome 24, but I wouldn't think that's the issue. What OS are you using? – brentonstrine Jan 16 '13 at 18:50
  • 1
    @feeela - agreed about the worst I get is a delay of the font loading in, FF 19.0 on Mac OSX. – Pebbl Jan 16 '13 at 18:51
  • @brentonstrine It's Ubuntu 12.04 – feeela Jan 16 '13 at 18:54
  • 2
    script tags do stop the processing of the page until they are done loading and executing. To reduce the impact of that, simply move them to before the closing body tag. – Kevin B Jan 16 '13 at 18:55

2 Answers2

1

The first thing I would try is reordering your script and style tags, so that all external css files are included prior to any javascript files.

I ran an audit using Chrome's developer tools and found 13 stylesheets that are included below a javascript file. Since browsers generally only allow 2 concurrent connections, you could see this flash if the html gets loaded but a stylesheet download is getting queued behind some other resource.

This would also explain why in the comments so many other people are having a difficult time reproducing what you're seeing -- they have different connection speeds and such.

DMac the Destroyer
  • 5,240
  • 6
  • 36
  • 56
1

$(document).ready() means that the DOM is ready, but not necessarily that the page is fully loaded. If you want to wait until the page is loaded, use the body onload or window onload events.

Christophe
  • 27,383
  • 28
  • 97
  • 140