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

我会在这里尽可能彻底。

我正在使用的应用程序使管理员能够创建文件夹，然后将照片上传到该文件夹中。该显示器类似于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标记。但长话短说，我有一个。。。下一个循环查看每个文件路径（从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);
}

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