6

There are two websites, one live one under development. I am porting a site to Zend Framework (for maintainability/integration purposes).

The original (live) site has seamless page loads - it will load, then update the content on the screen while keeping the background image, navigation etc on the page.

The ported site (development) "flashes" completely white for a brief moment then all of the content appears simultaneously.

From what I understand, this is not a FOUC (flash of unstyled content). The content on both of the sites always appears fully styles with all CSS rules. The two sites look identical when rendered, they use the same images, css, and HTML markup. The only difference is one (development) is being served by Zend Framework and the other (live) by procedural PHP.

What are the main causes for this, and is this a known bug/configuration issue with ZF? I've had this problem before without using ZF and did not resolve it.

Thanks for your help.

Mahdi.Montgomery
  • 2,024
  • 4
  • 17
  • 21

4 Answers4

6

Try putting javascript at the bottom of the page, just before the closing body tag. This should speed up page rendering as loading javascript blocks other downloads (css, images, etc.) therefore leaving your page blank until all of your scripts have loaded.

baseten
  • 1,362
  • 1
  • 13
  • 34
1

It could be your web server. Try comparing the HTTP headers of your servers with a web sniffer like http://web-sniffer.net/ and see if there's any difference in caching headers. If there is, then your browser is dumping everything and starting fresh, which could look almost like a FOUC in some circumstances.

mattbasta
  • 13,492
  • 9
  • 47
  • 68
  • Tried changing all headers to match for example, staples.com's configuration. Still having a white flash between pages. Worth mentioning it's valid XHTML, with no @imports for CSS – Mahdi.Montgomery Sep 21 '10 at 00:59
0

It's pretty common for frameworks to evaluate the controller logic and render the body of the page before outputting anything; this can lead to delays in data being sent to the client, where your old page (I'm guessing) dumps the header of the page immediately.

user229044
  • 232,980
  • 40
  • 330
  • 338
  • Would that really cause a flash of a completely empty page though? Looking at a website with considerably longer page loads than mine (Using abode.com as an example) - twice my loads on the Zend site - they have not even the slightest flicker transitioning between pages with the same layout. EDIT: Even better http://stackoverflow.com/users loading over 5x as long as my page - completely seamless each time you click the link. – Mahdi.Montgomery Sep 15 '10 at 23:54
0

Alright, I accepted an answer prematurely. What was causing this issue was in fact SWFObject!! I noticed this when developing for a new site, and it was exhibiting the same behavior. I believe this only happens in version 2+, but for anyone else that has the problem of the background flashing between page loads (as opposed to displaying all the rendered HTML at once) and happens to have swfobject being called on those pages - remove it and give it a go. It may just be your problem too.

To clarify, I had updated to a more recent version of SWFObject when porting the site over.

Mahdi.Montgomery
  • 2,024
  • 4
  • 17
  • 21