Any way to postpone PHP processing to after HTML loads? - php

Question

I have a page that loads a bunch of PHP chunks which take a lot of time.
They are initially hidden, until the user pops them open with a jQuery slideToggle.
Is there any way to make the HTML load first, and load the PHP after?
Here are the relevant snippets:
<script type="text/javascript">
jQuery(function($){
$('a.toggler').click(function(){
$(this).next().slideToggle('slow');
return false; //ensures no anchor jump
});
});
</script>
...
<div class='gallerysection'>
<a href='#' class='toggler'>Logos & Type</a>
<div class='toggle'><?php $album='1755641';include('VimeoAlbumSimple.php'); ?></div>
<a href='#' class='toggler'>Infographics & UIs</a>
<div class='toggle'><?php $album='1755635';include('VimeoAlbumSimple.php'); ?></div>
</div>
The include('VimeoAlbumSimple.php') loads a bunch of images and links from vimeo, and each call takes several seconds to load. There are more than 10 on the page.
This is VimeoAlbumSimple.php:
require_once('/home/dzg/zinclabs.com/assets/vimeolib.php');
$vimeo = new phpVimeo('807d405c3bf97d7c20060dabce349b6a', '9cc9d85a3b91b1a7');
$vimeo->setToken('274e2c915371a405ac1ec1cd7c3a72a5','3fe84c74bd6b4a9f736a41cb5709a76ec222686c');
$result = $vimeo->call('vimeo.albums.getVideos', array('album_id' => $album,full_response => '1'));
$videos = $result->videos->video;
echo '<div class="gallery">';
foreach ($videos as $video) {echo '
<div class="item">
<a href="http://player.vimeo.com/video/'.$video->id
.'?autoplay=1&title=0&byline=0&portrait=0&wmode=transparent" title="'
.$video->title.'" class="zoombox zgallery1">'
.'<img src="posters/'.$video->id.'.jpg" />'
.'<span class="text">
<span class="title">'.$video->title.'</span>'
.'<span class="duration">'.ltrim(gmdate("i:s", $video->duration),"0").'</span>'
.'<span class="description">'.nl2br($video->description).'</span>'
.'<div class="clear"></div>
</span>
</a>
</div>';
}
echo '</div>';

Answer 1

You cannot delay PHP processing after HTML has rendered because PHP is what produces the HTML in the first place.
What you can do is use AJAX to load pieces of the web page after the "main" layout has loaded. For example:
<div class='gallerysection'>
<a href='#' class='toggler'>Logos & Type</a>
<div class='toggle' data-url="VimeoAlbumSimple.php?album=1755641"></div>
<a href='#' class='toggler'>Infographics & UIs</a>
<div class='toggle' data-url="VimeoAlbumSimple.php?album=1755635"></div>
</div>
jQuery(function($){
$('.gallerysection .toggle').each(function(){
var $this = $(this);
$this.load($this.data("url"));
});
});
Here I have used an HTML5 data attribute to associate each div in the slideshow with the URL that will render its contents. When the DOM is ready jQuery fetches this url with .data and makes an AJAX request with .load to fetch the HTML and insert it inside the (initially empty) placeholder.