Question

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

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

第二个问题是，当禁用Javascript时，必须在页面上加载所有400多个缩略图。这是预期的行为，它适用于较小的画廊，但不适合大型画廊。是否可以在PHP中对其进行分页，但是使用JS（启用时）来阻止分页？

我不是非常精通JS，所以我希望有一个我完全没有意识到的解决方案，并且可以在没有彻底改革的情况下实施。

Answer 1

一点头脑风暴的建议......

在您的情况下，将原始标记（使用PHP）编写为仅包含结果的第一页可能是有意义的。这种方法应该允许您的文档完成，并且JS可以在合理的时间内开始。

随着页面完全加载，您可以使用jQuery - $ .ajax（） - 获取更多图像...根据您需要的问题大小，根据需要获取所有新页面设计这个。

请注意，可能干扰正确调用画廊插件。我不熟悉它，我不能肯定地说。如果是这样，您可能需要在启动画廊之前完成加载其他图像的过程。

Answer 2

好吧，首先你可以创建一个加载图库的PHP页面，例如一次25张图片。单击分页按钮，页面将重新加载并显示接下来的25个图像。

那应该是非常直截了当的。不需要JS / jQuery。

然后你可以添加JS脚本。例如。我有一个下拉列表来选择我想要使用的画廊。在jQuery中，我在selectbox.change上添加了一个listenere。

OnChange，我做一个jQiery.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显示图库

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

2 个答案: