php - 加载大型JQuery图库的解决方案

Question

我正在升级大学网站上的一些图片库(在某种程度上需要符合标准)。大多数画廊都是许多 HTML 页面。我一直在使用 jQuery 插件 Galleriffic 以及我编写的一些 PHP 代码来生成漂亮的分页画廊，到目前为止看起来很棒。不过我有两个问题。

第一个问题是，即使启用了 JS，加载仍然需要一段时间。根据我对 JS 的理解，所有元素都必须加载到 DOM 中，以便 JS 操作它们，因此所有缩略图都必须在 JS 启动之前加载到页面上。我可以做些什么来阻止所有缩略图加载，并且只需要它会加载图库每一页上的内容吗？这样，加载时间就分布在每个页面上。

第二个问题是，当禁用 Javascript 时，所有 400 多个缩略图都必须加载到页面上。这是预期的行为，对于较小的画廊来说效果很好，但对于大型画廊来说效果不佳。是否可以在 PHP 中对其进行分页，但使用 JS(启用时)来阻止分页？

我对 JS 不是很精通，所以我希望有一个我完全不知道的解决方案，并且可以在不进行彻底修改的情况下实现。

Answer 1

首先，您可以创建一个 PHP 页面来加载图库，显示例如一次 25 张图像。

单击分页按钮，页面将重新加载并显示接下来的 25 张图像。

这应该是非常简单的。不需要 JS/jQuery。

然后你可以添加你的JS脚本。

例如我有一个下拉列表来选择我要使用的图库。

在 jQuery 中，我在 selectbox.change 上添加了一个监听器。

OnChange，我执行 jQuery.post 并重新加载同一页面，现在获取接下来的 25 张图像。

我从 jQuery.post 返回 HTML 形式的列表结果(图像列表)。

那我就说

jQuery('#gallery').html(data);

这是我的 gallery.php 文件中的部分代码:

   // If Type is set to e.g. 'jquery', then we know tis page load is from a jQuery request.
    if ( (isset($_POST['type'])) && (isset($_POST['page'])) )
    {
        //This is a jQuery request
        $jQueryReq  = 1;
        $page         = $_POST['page'];
    }


<?php if($jQueryReq == 0) { ?>
  Default html oupthere when there is no jquery request
<?php } else if($jQueryReq == 1) {  ?>
  Here you put the code that gets the images and displays them on the page    
<?php }?>

这是伪 jQuery 代码。请注意帖子的返回类型是 HTML

  // Retrieve and list images
  jQuery.post("wp-content/imageGallery/gallery.php", { id: itemID, page: pagenr },
  function(data){
    jQuery('#galleryContainer').html(data);
    // Here you can add other jQuery functions to interact with images
  }, "html"); 

希望这能让您了解如何使用 PHP/jQuery 来显示图片库