Php 图像库，预加载vs AJAX

嘿，我正在尝试创建一个图像库，但我一直在考虑是否应该在页面加载时加载所有图像，还是让ajax在图像库中显示之前请求新图像

下面的示例显示，我正在查看第二个图像，在通过ajax请求加载图像5时加载了2个隐藏图像。我认为，如果在正在查看的图像和正在加载的图像之间保留两个加载的图像，那么用户就不必观看图像加载

   Image Gallery (Viewing Single Image)
   1        2      3       4       5
+-------+-------+-------+-------+-------+
|       |Loaded |       |   *   |Loading|
|Loaded |  On   |Loaded |Loaded | AJAX  |
|Hidden | Show  |Hidden |Hidden |Request|
+-------+-------+-------+-------+-------+

---

我没有在本地主机上使用过ajax，因此不知道与只在页面中加载图像并隐藏图像相比，它的性能如何。

您通常可以依靠浏览器缓存快速加载图像。我发现这样做的一个非常可靠的方法是：

$("<img>").attr('src', imageSrc);

$（“
这会创建一个图像元素，不会将其附加到DOM中，但浏览器仍会下载图像并缓存它。这样，您可以将创建的图像元素附加到该图像源中，也可以使用新的图像元素，并且不会有加载延迟

我不确定用ajax加载是什么意思。因为ajax请求与其他请求没有任何区别，所以使用“ajax”和“仅加载”之间不应该有性能差异“图像。如果您使用脚本以某种方式加载图像，服务器上可能会有一些开销。
我已经遇到过这种情况，在这种情况下，我还采集了两个样本，以找到解决方案。”

基本上，对于基本图像[缩略图图像]加载，您可以对页面使用延迟加载

对于加载大图像或主图像，可以将缩略图加载到其中，然后编写代码将大图像加载到其中

$('#GalleryImage img.mainImage').load(function() {  
  $(this).attr('src',$(this).attr('src').replace('thumb','large'));
});  

这可能会帮助您
最终，在HTML解析时加载、使用javascript/jquery预加载或使用ajax需要相同的时间，特别是当图像很大时（如果不是，您不会问？）

系统必须打开连接，对文件发出GET请求，然后通过网络传输文件。如果文件被缓存，则不会重新传输。网络传输是瓶颈，不同的加载方法不会改变这一点

您将通过两种方式影响用户的等待时间：


减少媒体的大小，例如使用缩略图，巧妙地进行压缩，重用大文件，以便利用缓存

仔细计算图像加载的时间，这就是图像预加载（使用或不使用AJAX，都是一样的）所做的。很可能不可能准确地知道何时开始加载图像，这样用户就不会等待了。按照您的建议，提前加载三个图像对我来说很好。用户可能偶尔会等待，但更多的是多余的


对于幻灯片放映，您可以使用一个数组来回忆哪些图像被卸载、作为缩略图或完全加载，这将确保您不会发出不必要的重复请求

我真的没有给你什么灵丹妙药……没有，但我希望这能有所帮助。
facebook就是这么做的，我认为——它们完全按照你所描述的那样——当你在某人的照片库中滚动时，一次可以看到一张全尺寸的照片，这样当你滚动时，你就不会看到任何加载延迟。如果你尝试加载如此多的图像会导致用户体验下降，这就是为什么facebook只加载接下来的3幅图像。我认为，你所描述的是理想的方式。当然，加载时，facebook上的所有图像都会被缓存，这样它们就不必再被抓取，比如在通过图库返回时。