Highslide Gallery點擊縮略圖後加載圖片（改善pagespeed）

Question

我使用Highslide jQuery Gallery在單個頁面上加載相冊及其縮略圖。 用戶可以單擊縮略圖，然後加載每個專輯。

如果我每頁有超過10張專輯（由於加載大拇指和圖片），網站運行緩慢 我對數據庫中的數據使用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> 

Answer 1

1. 您正在加載完整圖像到縮略圖：<img src='/albums/<?php echo $firstPhoto; ?>' height="100px" width="100px" />。瀏覽器需要更多時間才能加載大圖片，並需要更多時間來調整大圖片的大小。您應該在服務器端準備小型100x100縮略圖。

2. 您不應該明確加載所有專輯<div class="hidden-container">...</div>。根據需要通過AJAX加載所選專輯的內容（當用戶點擊縮略圖時）。此外，您可能會在頁面加載後開始在後臺預加載相冊。

3. 請勿將事件處理程序直接分配給每個onclick="..." - 使用event delegation例如，

   $("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}); 
   });