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

我会尽量在这里尽可能地透彻。缓存通过PHP/AJAX/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标记。但长话短说，我有一个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); 
}

现在 - 正如我以前说过，当只有一对夫妇的文件夹中的照片，这是没有问题的。但是，当我们开始进入更高的数字时，它就成了一个问题。所以 - 据说，有什么方法可以将这些照片存储到浏览器缓存中，以便在初始加载后更快地加载这些照片？

来源

2012-03-21 John Hubler

是JavaScript进程变慢或图像加载？ – 2012-03-21 18:53:13

@拉斐尔 - 我觉得这个过程变慢了。例如，当我点击一个文件夹时，要加载照片显示，我必须一个接一个地观看照片。这些照片正好在那里出现，所以它不像我正在观看缓慢的照片加载进程......但是，等待100张照片加载，每张照片都需要大约一秒钟的时间，这是不可取的。我已经考虑采取稍微不同的方法，并在我的仪表板。php文件，创建几百个空图像标签，然后通过js填充src属性 - 但我不确定这是最好的方法。 – 2012-03-21 20:29:57

我不相信这是你的JavaScript变得缓慢，因为你的代码不是太重......检查我的答案 – 2012-03-21 21:12:13

所以..这个问题不仅原因之一，让我们对他们说：]

的JavaScript函数运行时阻止页面：功能运行时，所有的页面撑受阻直到它停止运行。一般来说，它需要几毫秒的时间，而且它不会被人类感知，但是当你在一个循环内部有一个艰难的过程时，它可能需要几秒钟，然后才会清晰可见。
大图像加载时间可能过长：由于文件越大，文件加载时间越长;如果您有100张图片，且图片的大小为5MB，则需要花费时间来加载所有图片（它们不会并行加载）。
Parallel文件加载：browsers has a limit number for requests on each host（any.thing.com）;因此，如果您尝试在同一个主机中加载100个图像（www.yourhost.com/images/#{imgname），则无法并行加载所有图像，浏览器将执行可能的请求数一个主机然后排队所有其他主机。

好了，现在你知道了很多请求页面的HTTP问题，让我们去解决方案：d

的JavaScript块：这是不是你的情况，但对于解决这个你应该打破javascript的同步性。怎么样？
- 删除循环;
- 使用循环内的代码构建函数;这个函数应该接收元素的列表和索引;
- 在你的新功能，你将只与接收的索引的单元工作，然后再调用函数（如递归性）增加指标，并使用setTimeout功能（这将打破同步）
大图像：解决它很容易;这个解决方案的关键是用拇指代替真实的图像。您可以使用@MichalPlško建议的脚本（phpThumb）。此外，您应该限制您加载的图片数量，并按需加载更多图片，例如Pinterest（使用自动加载进行分页）。
并行文件加载：这应该是你真正的问题;这不是太容易，但它不是解决问题的地狱：D你只需要创建一些子域名，并让它们指向正确的位置，如img01.yourdomain.com指向你的图像文件夹或类似的东西。

来源

2012-03-21 21:03:40

您可以通过使用名为phpThumb()的脚本来改善缓存行为。它可以即时生成缩略图图像，还可以处理服务器和浏览器中图像的缓存。从项目网站：

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

因此，如果您认为您的问题可能是由缩略图创建，图片缓存等类似问题引起的，请尝试一下。我用这个很好的结果。

来源

2012-03-21 19:18:50 Michal

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

回答

相关问题