图库,预加载与AJAX

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 请求与任何其他请求没有任何不同，因此使用“ajax”和“仅加载”图像之间不应该存在性能差异。如果您使用脚本以某种方式加载图像，服务器上可能会产生一些开销。