php - 缓存通过 PHP/AJAX/JSON/jQuery 加载的动态图像

Question

我会尽力做到尽可能彻底。

我正在开发的应用程序使管理员能够创建文件夹，然后将照片上传到该文件夹​​中。该显示类似于 Pinterest 的显示，它将拼贴中的所有照片加载到一个屏幕上。当您只有 5 - 6 张照片时，它非常有效，但这种情况很少发生。一旦你开始在其中获取更多照片，它就会开始变得更慢。另一件事是，每当您删除图片或重新进入该文件夹时，整个显示都必须重新加载。我需要某种方式来缓存这些图像。

这是我的脚本的逻辑:

在dashboard.php上，有两个javascript包含:homepageActions.js和fileManager.js。 homepageActions.js 有一个 document.ready() 脚本，它调用 JavaScript 函数 showFiles()。

所以基本上，更简洁一点，一旦文档加载，函数 showFiles() 就会被调用。该函数如下所示:

function showFiles(directoryName) {
  $.ajax({
    url: 'displayRecords.php',
    type: 'post',
    data: ({directoryName:directoryName}),
    dataType: 'json',
    success: function(data) {
        constructTable(data);
        $(document).find("a[rel*='lightbox']").lightBox();
    }
  });
}

该函数传递了一个文件夹路径。从那里，AJAX 脚本调用一个 PHP 脚本，该脚本在该文件夹中查找，并获取该文件夹中所有目录和图像的列表。然后，它构造一个 JSON 字符串，其中包含最初传入的文件夹内的每个子文件夹和图像的详细信息。该脚本成功返回后，将调用另一个函数 constructTable(data)，该函数传入函数的 JSON 字符串。

这里事情开始变得有点棘手。

constructTable() 函数中有大约 240 行代码，我不会在此处包含这些代码，因为它很难理解。总而言之，此函数解析 JSON 字符串，找出哪些条目是目录，哪些条目是文件。它从中创建两个数组:一个文件夹数组和一个文件数组。

首先，我处理所有文件夹，并相应地显示它们。这部分很好，我不用担心。

在那之后，我开始浏览这些图像。对于每个图像，我基本上都围绕它编写了大量代码。每个图像周围都有 div、链接和其他 HTML 标记。但长话短说，我有一个 for...next 循环来查看每个文件路径(从 JSON 收集)，然后构建一个长 HTML 字符串，然后使用 jQuery 将其附加到 DIV 中。所以它最终看起来像这样:

for (var a = 0; a < numPhotos; a++) {
   photoCode += "<div id='outside-container-"+a+"'>";
   photoCode += "<a rel='lightbox' class='photo-link' href='"++"'>";
   photoCode += "<img src='http://" + rootURL + "/uploads/"+fileNameArray[a] + "' width='200' class='photo-thumb'/></a>";
   photoCode += "</div>";

   $("#column1").append(photoCode);
}

现在 - 正如我之前所说，当文件夹中只有几张照片时，这没有问题。然而，当我们开始进入更高的数字时，这就成为一个问题。那么 - 话虽如此，有什么方法可以将这些照片存储到浏览器缓存中，以便它们在初始加载后加载得更快吗？

Answer 1

所以..这个问题不仅仅是一个原因，让我们来解决一下:]

1. 函数运行时 JavaScript 会阻塞页面:函数运行时，所有页面都会保持阻塞状态，直到其停止运行。一般来说，它需要几毫秒，并且人类无法感知，但是当你在循环内有一个硬过程时，可能需要几秒钟，然后它就会清晰可见。
2. 大图像可能需要很长时间才能加载:文件越大，加载时间就越长；如果您有 100 张平均大小为 5MB 的图像，则需要很长时间才能加载所有图像(它们不会并行加载)。
3. 并行文件加载: browsers has a limit number for requests on each host (any.thing.com)；因此，如果您尝试在同一主机 (www.yourhost.com/images/#{imgname}) 中加载 100 个图像，您将无法并行加载所有图像，浏览器将执行可能的请求数量一台主机，然后将所有其他主机排队。

好的，现在您知道了存在大量请求的页面的一些 HTTP 问题，让我们看看解决方案:D

1. JavaScript block : 这不是你的情况，但为了解决这个问题，你应该打破 JavaScript 同步性。如何？
   • 删除循环；
   • 使用循环内的代码构建一个函数；这个函数应该接收一个列表和元素的索引；
   • 在新函数中，您将仅使用接收到的索引的元素，然后再次调用该函数(如递归)增加索引并使用 setTimeout 函数 (这会破坏同步性)
2. 大图像:解决起来很容易；该解决方案的关键是显示拇指而不是真实图像。您可以使用 @MichalPlško ( phpThumb ) 建议的脚本。此外，您应该限制加载的图像数量，并按需加载更多图像，就像 Pinterest 所做的那样(自动加载分页)。
3. 并行文件加载:这应该是您真正的问题；这不是太容易，但也不是很难解决:D 你只需要创建一些子域并让它们指向正确的位置，比如 img01.yourdomain.com 指向你的图像文件夹或类似的东西。