php – Highslide Gallery点击缩略图后加载图片(改善pagespeed)

发布时间：2020-12-13 22:44:35 所属栏目：PHP教程来源：网络整理

导读：我使用Highslide jQuery Gallery在一个页面上加载专辑及其缩略图. 用户可以单击缩略图,然后加载每个相册. 如果我每页有超过10张专辑(由于加载拇指和图片),网站运行缓慢我对数据库中的数据使用base64编码. 如何只加载缩略图而不是整张专辑？只有在用户点击

我使用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>

解决方法

>您正在将完整图像加载到缩略图中：< img src ='/ albums /<？php echo $firstPhoto; ？>” height =“100px”width =“100px”/>.浏览器需要更多时间来加载大照片,甚至需要更多时间来调整大小.您应该在服务器端准备小的100×100缩略图.
>您不应加载所有相册< div class =“hidden-container”> …< / div>明确.根据需要通过AJAX加载所选专辑的内容(当用户点击缩略图时).此外,您可能会在页面加载后开始在后台预加载相册.
>不要将事件处理程序直接分配给每个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});
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!