php/Ajax - 预加载图像的最佳实践

我已经整理了一个非常类似于flickr photostream功能的脚本.两个缩略图彼此相邻,当您单击下一个或上一个链接时,下一个(或上一个)两个图像会滑入.酷!

目前,当页面加载时,它会加载两个图像.第一次使用nxt/prv然后通过ajax加载接下来的两个图像或前两个图像,第一个图像的id在url中传递,两个新图像的HTML返回并通过ajax显示.

很简单,但它让我思考,在一个缓慢的连接,或沉重的服务器加载然后两个图像,虽然相对较小的缩略图仍然需要一段时间来加载,而滑动窗格的好东西是隐藏数据的事实在没有加载延迟的情况下快速平滑地滑动.

所以我从表现和良好实践的角度来看,哪种选择最好,这是我现在能想到的,对建议持开放态度.

1,通过JSON调用每组图像(它应该是快速的？)

2,将所有可能的图像加载到json文件中并以这种方式提取细节 - 尽管浏览器仍然需要加载图像.有时可能会有4张图片,有时可能会有1000张图片!

3,通过php将10张图像加载到Json或其他文件中,并将所有10张图像加载到浏览器中,隐藏8张未显示的图像,并始终显示中间的两张图像.这里的问题是,每次有人点击时,文件都必须重新加载第一张和最后一张图片,这仍然需要时间,尽管我认为中间图像现在已经全部通过浏览器缓存了.但仍然有加载时间.

4,是否可以使用包含所有图像细节的json图像(无论数字如何)并使用上面的3来加载其中10个图像,是否可以使用ajax只读取10行并保留最后一个指针一个它读取,所以json文件可以快速加载,短刷新和图像任何一方通过浏览器缓存!

希望这清楚,有关如何处理这个的任何建议？

要从Javascript预加载图像,您不需要执行任何听起来像AJAX或JSON的操作.你需要的只是这个:

var img = new Image();
img.src = "http://example.com/new/image.jpg";

浏览器很乐意在后台加载图像,即使它没有显示在任何地方.然后,当您更新src另一个(显示的)图像标记的字段时,浏览器将立即显示已加载的图像部分(希望所有图像).