4

Highslide jQuery Gallery を使用して、アルバムとそのサムネイルを 1 つのページに読み込みます。ユーザーがサムネイルをクリックすると、各アルバムが読み込まれます。

1 ページに 10 枚を超えるアルバムがあると、Web サイトの実行が遅くなります (親指と写真を読み込むため)。データベースのデータに base64 エンコーディングを使用しています。

アルバム全体ではなくサムネイルのみを読み込むにはどうすればよいですか? アルバムは、ユーザーがサムネイルをクリックした場合にのみ読み込まれます..

<?php 

//vars
$albumsQuery = mysql_query("select * from albums");
$album_count = 0;
// start loop
while ($album = mysql_fetch_array($albumsQuery)) {
    $album_count++;
    $unserializePhotos  = unserialize(base64_decode($album['photos']));
    $unserializeDescriptions = unserialize(base64_decode($album['descriptions']));
    $firstPhoto = '';
    $first_photo_count = 0;
    foreach ($unserializePhotos as $k => $v) {
        if ($first_photo_count == 0) {
            $firstPhoto = $v['name'];
        }
        $first_photo_count++;
    }
    $first_desc_count = 0;
    foreach ($unserializeDescriptions as $k => $v) {
        $unserializeDescriptions[$k]=htmlspecialchars($v);
        if ($first_desc_count == 0) {
            $firstDesc = htmlspecialchars($v);
        }
    $first_desc_count++;
    }
?>

<div class="highslide-gallery">
<a class='highslide' id="thumb<?php echo $album_count; ?>" href='/albums/<?php echo $firstPhoto; ?>' onclick="return hs.expand(this, {slideshowGroup: <?php echo $album_count; ?>})">
    <img src='/albums/<?php echo $firstPhoto; ?>' height="100px" width="100px" />
</a>
<div class="hidden-container">
    <?php 
    $photoDescIndex = 0;
    foreach ($unserializePhotos as $k => $v) {
        if ($v['name'] != '' && $v['name'] != $firstPhoto){
    ?>
        <a class='highslide' href='/albums/<?php echo $v['name']; ?>'  onclick="return hs.expand(this, {slideshowGroup: <?php echo $album_count; ?>})">
            <img src='/albums/<?php echo $v['name']; ?>' />
        </a>
    <?php 
        }
    $photoDescIndex++;
    } 
    ?>
</div>
4

1 に答える 1

1

  1. 完全な画像をサムネイルにロードしています: <img src='/albums/<?php echo $firstPhoto; ?>' height="100px" width="100px" />。ブラウザーは、大きな写真を読み込むのに時間がかかり、サイズを変更するのにさらに時間がかかります。サーバー側で小さな 100x100 のサムネイルを用意する必要があります。

  2. <div class="hidden-container">...</div>すべてのアルバムを明示的にロードしないでください。選択したアルバムのコンテンツをオンデマンドで AJAX 経由で読み込みます (ユーザーがサムネイルをクリックしたとき)。さらに、ページの読み込み後にバックグラウンドでアルバムの事前読み込みを開始する場合があります。

  3. それぞれにイベント ハンドラを直接割り当てないでください。たとえば、イベント デリゲーションonclick="..."を使用します。

    $("body").on("click", ".highslide", function() {
  var album_count = this.id.slice(5); // a id="thumb<?php echo $album_count; ?>"
  var target = $(this).next("div.hidden-container");
  // TODO: load album album_count into target via AJAX
  // TODO: after load: hs.expand(this, {slideshowGroup: album_count});
});
于 2012-08-01T09:36:43.050 に答える