缓存通过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 ...循环,它查看每个文件路径(从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. Parallel的文件加载: 浏览器对每个主机上的请求都有一个限制号(any.thing.com); 因此,如果您尝试在同一主机中加载100个图像(www.yourhost.com/images/#{imgname}),您将无法并行加载所有这些图像,浏览器将执行可能的请求数量一个主机,然后排队所有其他主机.

好的,现在你知道有很多请求的页面的一些HTTP问题,让我们去解决方案:D

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