缓存通过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);
}
现在 - 正如我以前说过,当只有一对夫妇的文件夹中的照片,这是没有问题的。但是,当我们开始进入更高的数字时,它就成了一个问题。所以 - 据说,有什么方法可以将这些照片存储到浏览器缓存中,以便在初始加载后更快地加载这些照片?
所以..这个问题不仅原因之一,让我们对他们说:]
- 的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指向你的图像文件夹或类似的东西。
您可以通过使用名为phpThumb()的脚本来改善缓存行为。它可以即时生成缩略图图像,还可以处理服务器和浏览器中图像的缓存。从项目网站:
缩略图可以缓存以减少服务器负载。任何源图像的多个大小可以单独缓存。当(本地)源图像被修改时缩略图会自动更新
因此,如果您认为您的问题可能是由缩略图创建,图片缓存等类似问题引起的,请尝试一下。我用这个很好的结果。
是JavaScript进程变慢或图像加载? – 2012-03-21 18:53:13
@拉斐尔 - 我觉得这个过程变慢了。例如,当我点击一个文件夹时,要加载照片显示,我必须一个接一个地观看照片。这些照片正好在那里出现,所以它不像我正在观看缓慢的照片加载进程......但是,等待100张照片加载,每张照片都需要大约一秒钟的时间,这是不可取的。我已经考虑采取稍微不同的方法,并在我的仪表板。php文件,创建几百个空图像标签,然后通过js填充src属性 - 但我不确定这是最好的方法。 – 2012-03-21 20:29:57
我不相信这是你的JavaScript变得缓慢,因为你的代码不是太重......检查我的答案 – 2012-03-21 21:12:13