Question

Consider the following:

incl.php

<div id='footer'>
  <?php
      sleep(10);
      echo "<div class='footer-float'><!-- content --></div>";
  ?>
  <div style='clear:both;'></div>
</div>

page.php

<div id='main-content'>
  <!-- normal markup structure... -->
</div>
<div id='footer-wrapper'>
  <?php include('incl.php'); ?>
</div>

I have a page (page.php) which includes a footer, the markup for which is in incl.php.
The real incl.php does some wordpress database stuff to look up latest posts and display a little blurb for each one – this works fine but because there is a delay (represented here by the sleep() command) making the database connections and including the required WP files, it can break the layout of my page as it can pause for up to several seconds.

While it is waiting, the floated divs in my footer mean that the container won’t stretch to fit the content already loaded until incl.php finishes executing and provides the clearing div needed to stretch the container.

What I’d like to know is this: is there a way I can get PHP to serve the markup (that is, the non-dynamic stuff) first rather than doing everything sequentially like it seems to at the moment?
Otherwise, is there a better way to make this less jarring? I can’t put a static height on the footer div in question as it will change depending on the content.

Any pointers much appreciated

EDIT:
Just a few points for those concerned about efficiency:

This issue crops up when I’m testing with the site running locally but the database server is remote and on the other end of an unreliable and slow net connection (if you’ve heard about ‘hurricane bawbag’ that might provide a little more context) and it is not an issue I expect to crop up much if at all in the live environment.

While points on optimising and being more efficient are appreciated, I don’t see how I can justify spending time worrying about a possible 2 second delay in loading some footer content that only crops up in the testing environment – and please don’t make the mistake of thinking that I haven’t considered performance already purely because I’ve said there is a delay in loading stuff (again – LOCAL site, REMOTE database server, SLOW connection).

For the purposes of this question, please assume that the delay isn’t the problem, rather that the problem is how to deal with possible delays without the page looking a mess.

Answer 1

If you want to keep the current flow without many changes you can use output buffering:

// at the begining of your application
ob_start();
// rest of the application: do any kind of output
//...

// at the end, maybe at the end of the footer
ob_end_flush();

Otherwise, if you don’t want to have a blank page for a few seconds, the best solution would be to use Ajax: load the page normally (maybe with a min-height of the content with a loader), and load the results afterwards.