0

多くの時間がかかる大量の 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>';
4

1 に答える 1

4

そもそも HTML を生成するのは PHP であるため、HTML のレンダリング後に PHP の処理を​​遅らせることはできません。

できることは、「メイン」レイアウトがロードされた後に、AJAX を使用して Web ページの一部をロードすることです。例えば：

<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 データ属性を使用して、スライドショーの各 div をそのコンテンツをレンダリングする URL に関連付けています。DOM の準備が整うと、jQuery はこの URL をフェッチ.dataし、AJAX リクエストを作成.loadして HTML をフェッチし、(最初は空の) プレースホルダー内に挿入します。

于 2013-05-17T22:14:19.463 に答える