Question

嘿我正在尝试创建一个图片库，但我仍然坚持在页面加载时是否应该加载所有图像，或者在图库中显示之前获取ajax请求新图像？

下面的示例显示我正在查看第二个图像，并且在通过ajax请求加载图像5时加载了2个隐藏图像。我想如果我在正在查看的图像和ajax正在加载的图像之间保留两个加载的图像用户不应该观看图像加载

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

我没有使用本地主机的ajax，所以不知道它与只是将图像加载到页面并隐藏它们相比有什么样的性能。

Answer 1

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

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

这会创建一个图像元素，不会将其附加到DOM，但浏览器仍会下载图像并对其进行缓存。使用它，您可以附加您创建的图像元素或使用带有该图像源的新图像元素，并且不应该是加载延迟。

我不确定你用ajax加载是什么意思。由于ajax请求与任何其他请求没有任何不同，因此使用＆＃34; ajax＆＃34;之间不应该存在性能差异。和＃34;只是加载＆＃34;图像。如果您使用脚本以某种方式加载图像，则服务器上可能会有一些开销。

Answer 2

最终，在HTML解析时加载，使用javascript / jquery预加载或使用ajax需要相同的时间，特别是如果图像很大（如果不是，你不会问？）。

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

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

缩小媒体的尺寸，例如使用缩略图，熟练使用压缩，重用大文件，以便利用缓存......
仔细加载图像的时间，这是图像预加载（有或没有AJAX，它是一样的）。可能无法确切知道何时开始加载图像，因此用户不会等待。正如你的建议，前面加载三张图片对我来说听起来不错。用户可能偶尔会等待，但更多的是过度杀伤。

对于幻灯片放映，您可以使用一个数组来调用卸载的图像，缩略图或完全加载的图像，这样可以确保您不会发出不必要的重复请求。

我真的没有给你一个神奇的子弹......没有一个，但我希望这有帮助。

Answer 3

我已经有过这样的情况，我也采取了两个样本找到解决方案

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

并且对于加载大图像或主图像，您可以将缩略图图像加载到该图像中，然后您可以编写用于将大图像加载到其中的代码。

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

愿这会帮到你

图库，预加载与AJAX

3 个答案: