Любой способ отложить обработку PHP после загрузки HTML?

Question

У меня есть страница, которая загружает кучу фрагментов PHP, которые занимают много времени. Они изначально скрыты, пока пользователь не откроет их с помощью jQuery slideToggle.

Есть ли способ сделать загрузку HTML первым и загрузить PHP после?

Вот соответствующие фрагменты:

<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 &amp; Type</a> 
    <div class='toggle'><?php $album='1755641';include('VimeoAlbumSimple.php'); ?></div> 
    <a href='#' class='toggler'>Infographics &amp; UIs</a> 
    <div class='toggle'><?php $album='1755635';include('VimeoAlbumSimple.php'); ?></div>     
</div> 

В include('VimeoAlbumSimple.php') загружает кучу картинок и ссылок с Vimeo, и каждый вызов занимает несколько секунд, чтобы загрузить. На странице более 10.

Это 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&amp;title=0&amp;byline=0&amp;portrait=0&amp;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

Вы не можете отложить обработку PHP после того, как HTML оказал, потому что PHP является то, что производит HTML в первую очередь.

Что вы можете сделать, это использовать AJAX для загрузки фрагментов веб-страницы после загрузки «основного» макета. Например:

<div class='gallerysection'> 
    <a href='#' class='toggler'>Logos &amp; Type</a> 
    <div class='toggle' data-url="VimeoAlbumSimple.php?album=1755641"></div> 
    <a href='#' class='toggler'>Infographics &amp; 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")); 
    }); 
}); 

Здесь я использовал HTML5 data attribute, чтобы связать каждый элемент DIV в слайд-шоу с URL, который будет оказывать его содержимое. Когда DOM готов, jQuery извлекает этот URL-адрес с .data и делает запрос AJAX с .load для извлечения HTML-кода и вставки его внутри (первоначально пустого) заполнителя.