草庐IT

php - Highslide Gallery 单击缩略图后加载图像(提高页面速度)

coder 2024-04-20 原文

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

最佳答案

  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});
});

关于php - Highslide Gallery 单击缩略图后加载图像(提高页面速度)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11667544/

后加缩略count34phpwebphotothumbnailsslowdown

有关php - Highslide Gallery 单击缩略图后加载图像(提高页面速度)的更多相关文章

  1. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  2. 程序员如何提高代码能力？ - 2

    前言作为一名程序员，自己的本质工作就是做程序开发，那么程序开发的时候最直接的体现就是代码，检验一个程序员技术水平的一个核心环节就是开发时候的代码能力。众所周知，程序开发的水平提升是一个循序渐进的过程，每一位程序员都是从“菜鸟”变成“大神”的，所以程序员在程序开发过程中的代码能力也是根据平时开发中的业务实践来积累和提升的。提高代码能力核心要素程序员要想提高自身代码能力，尤其是新晋程序员的代码能力有很大的提升空间的时候，需要针对性的去提高自己的代码能力。提高代码能力其实有几个比较关键的点，只要把握住这些方面，就能很好的、快速的提高自己的一部分代码能力。1、多去阅读开源项目，如有机会可以亲自参与开源

  3. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

    我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

  4. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  5. ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库？ - 2

    有这样的事吗？我想在Ruby程序中使用它。 最佳答案 试试这个http://csl.sublevel3.org/jp2a/此外，Imagemagick可能还有一些东西 关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6510445/

  6. ruby-on-rails - 使用 Dragonfly 从 URL 分配图像 - 2

    我正在使用Dragonfly在Rails3.1应用程序上处理图像。我正在努力通过url将图像分配给模型。我有一个很好的表格:{:multipart=>true}do|f|%>RemovePicture?Dragonfly的文档指出:Dragonfly提供了一个直接从url分配的访问器:@album.cover_image_url='http://some.url/file.jpg'但是当我在控制台中尝试时:=>#ruby-1.9.2-p290>picture.image_url="http://i.imgur.com/QQiMz.jpg"=>"http://i.imgur.com/QQ

  7. Ruby-vips 图像处理库。有什么好的使用示例吗？ - 2

    我对图像处理完全陌生。我对JPEG内部是什么以及它是如何工作一无所知。我想知道，是否可以在某处找到执行以下简单操作的ruby​​代码:打开jpeg文件。遍历每个像素并将其颜色设置为fx绿色。将结果写入另一个文件。我对如何使用ruby​​-vips库实现这一点特别感兴趣https://github.com/ender672/ruby-vips我的目标-学习如何使用ruby​​-vips执行基本的图像处理操作(Gamma校正、亮度、色调……)任何指向比“helloworld”更复杂的工作示例的链接——比如ruby​​-vips的github页面上的链接，我们将不胜感激!如果有ruby​​-

  8. ruby-on-rails - 如何播种图像的路径？ - 2

    Organization和Image具有一对一的关系。Image有一个名为filename的列，它存储文件的路径。我在Assets管道中包含这样一个文件:app/assets/other/image.jpg。播种时如何包含此文件的路径？我已经在我的种子文件中尝试过:@organization=...@organization.image.create!(filename:File.open('app/assets/other/image.jpg'))#Ialsotried:#@organization.image.create!(filename:'app/assets/other/i

  9. ruby-on-rails - 安全地显示使用回形针 gem 上传的图像 - 2

    默认情况下:回形针gem将所有附件存储在公共(public)目录中。出于安全原因，我不想将附件存储在公共(public)目录中，所以我将它们保存在应用程序根目录的uploads目录中:classPost我没有指定url选项，因为我不希望每个图像附件都有一个url。如果指定了url:那么拥有该url的任何人都可以访问该图像。这是不安全的。在user#show页面中:我想实际显示图像。如果我使用所有回形针默认设置，那么我可以这样做，因为图像将在公共(public)目录中并且图像将具有一个url:Someimage:看来，如果我将图像附件保存在公共(public)目录之外并且不指定url(同

  10. ruby - Paperclip:以编程方式分配图像并设置其名称 - 2

    使用Paperclip，我想从这样的URL抓取图像:require'open-uri'user.photo=open(url)问题是我最后得到一个像“open-uri20110915-4852-1o7k5uw”这样的文件名。有什么方法可以更改user.photo上的文件名？作为一个额外的变化，Paperclip将我的文件存储在S3上，所以如果我可以在初始分配中设置我想要的文件名就更好了，这样图像就会上传到正确的S3key。像这样:user.photo=open(url),:filename=>URI.parse(url).path 最佳答案

随机推荐