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

我在这里会尽量彻底

我正在使用的应用程序使管理员能够创建文件夹，然后将照片上载到该文件夹中。该显示器类似于Pinterest，它在一个屏幕上加载拼贴中的所有照片。当你只有5-6张照片在里面的时候，它工作得很完美，但这种情况很少发生。一旦你开始得到更多的照片在那里，它开始变得越来越慢。另一件事是，无论何时删除图片或重新输入该文件夹，都必须重新加载整个显示。我需要一些缓存这些图像的方法

以下是我脚本的逻辑：

在

dashboard.php

上，有两个javascript包括：

homepageActions.js

和

fileManager.js

homepageActions.js

有一个调用javascript函数的

document.ready（）

脚本，

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

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

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

constructTable（data）

，该函数将JSON字符串传递给该函数

这就是事情开始变得有点棘手的地方

constructTable（）

函数中有大约240行代码，我这里不包括这些代码，因为它很难理解。总之，这个函数解析JSON字符串，找出哪些条目是目录，哪些条目是文件。它从中创建两个数组：文件夹数组和文件数组

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

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

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

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

for（var a=0；a

---

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

您可以使用名为的脚本来改进缓存行为。它可以动态生成缩略图，还可以在服务器和浏览器中缓存图像。从项目网站：

可以缓存缩略图以减少服务器负载。可以单独缓存任意源图像的多个大小。修改（本地）源图像时，缩略图会自动更新

---

因此，如果您认为问题可能是由缩略图创建、图片缓存和类似操作引起的，请尝试一下。我在这方面取得了很大的成绩。

所以。。这个问题不仅仅有一个原因，让我们向他们解释：]

函数运行时JavaScript阻止页面：函数运行时，所有页面保持阻止状态，直到停止运行。通常需要几毫秒，人类无法感知，但当循环中有一个硬过程时，可能需要几秒钟，然后它就会清晰可见

大型图像加载时间过长：文件越大，加载时间越长；如果你有大约100个平均大小为5MB的图像，那么加载所有图像需要很长时间（它们不是并行加载的）

Parallel的文件加载：（any.thing.com）；因此，如果您试图在同一主机（www.yourhost.com/images/#{imgname}）中加载100个图像，您将无法并行加载所有图像，浏览器将对一个主机执行可能的请求数，然后对所有其他主机进行排队

好的，现在您知道了一些关于有大量请求的页面的HTTP问题，让我们转到解决方案：D

JavaScript块：这不是您的情况，但要解决这个问题，您应该打破JavaScript的同步性。怎么用？

• 移除回路
• 用循环中的代码构建一个函数；此函数应接收元素的列表和索引
• 在新函数中，您将只处理接收到的索引的元素，然后再次调用该函数（如递归），增加索引并使用

  setTimeout

  函数（这将破坏同步性）

大型图像：解决它很容易；此解决方案的关键是显示拇指，而不是真实的图像。您可以使用@MichalPlško（）建议的脚本。此外，您应该限制加载的图像数量，并根据需要加载更多图像，如Pinterest do（自动加载分页）

并行文件加载：这应该是您真正的问题；这不是很容易，但也不是很难解决的问题：D您只需创建一些子域并使它们指向正确的位置，如img01.yourdomain.com指向您的图像文件夹或类似的内容

---

是javascript进程变慢了还是图像加载变慢了？@Rafael-我觉得是p