加载大型jQuery图库的解决方案答案

【问题标题】：Solution for loading large JQuery image gallery加载大型jQuery图库的解决方案
【发布时间】：2019-06-28 03:11:12
【问题描述】：

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

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

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

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

【问题讨论】：

感谢您的建议。我决定禁用插件执行的分页，并在 PHP 中进行分页。这样，即使没有 javascript，您仍然可以获得分页。它确实减少了插件的功能，但它似乎是最明智的解决方案。

标签： php javascript jquery pagination

【解决方案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 显示图片库

【讨论】：

所以让用户选择是否选择 jQuery 库...如果我放弃我正在使用的插件，我可能会走这条路。它为我做分页，所以如果我在 PHP 中做，我必须找到一种方法来工作。
在我的解决方案中，用户必须启用 javascript 才能使用图库。但是，如果您正在为使用不支持 javascript 的设备的用户组进行开发，那么您必须同时兼顾两者。但是现在所有主流浏览器都支持 javascripts。
嗯，作为一所公立大学，我们必须遵守 403c 标准，对我们来说，这意味着支持 IE6 以及非 JS 浏览器。这有点麻烦，但需要有人去做。
哇。老兄！我真的希望你的大学不再使用 IE6。今天，如果用户使用 IE6，就应该强制他们升级 :) 我认为是时候更新 403c 标准了。过去编码没有意义：op Good Luck :)

【解决方案2】：

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

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

页面完全加载后，您可以使用 jQuery -- $.ajax() -- 来获取更多图像......根据需要，根据您想要的问题大小，所有这些新页面都可以设计这个。

当心这可能干扰正确调用gallerific插件。我不熟悉，也不能肯定。如果是这样，您可能需要在启动 Gallerific 之前完成加载其他图像的过程。

【讨论】：