8

嘿，我正在尝试制作一个图片库，但我不知道是否应该在页面加载时加载所有图片，还是让 ajax 在新图片显示在画廊之前请求它们？

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

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

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

4

3 回答 3

1

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

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

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

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

于 2013-01-07T04:45:06.220 回答
1

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

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

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

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

  • 仔细考虑图像加载的时间，这就是图像预加载（无论有没有 AJAX，都是一样的）所做的。可能无法确切知道何时开始加载图像，因此用户不会等待。按照您的建议，提前加载三张图像对我来说听起来不错。用户可能偶尔会等待，但更多是多余的。

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

我并没有真正给你一颗灵丹妙药......没有，但我希望这会有所帮助。

于 2013-01-07T13:21:09.557 回答
0

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

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

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

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

愿这对你有帮助

于 2013-01-07T09:28:54.900 回答