重型图像预加载是悬挂脚本

Question

我正在一个图像库中为具有高分辨率图像（类似于1280x1400px）的客户端工作，实际上我的脚本执行此操作：

1. 加载第一张图片并显示
2. 加载第一张图片时，加载该图库的所有缩略图（每张200x440像素或类似的东西）
3. 当加载所有缩略图时，开始从缩略图（顺序）缓存所有图像（我的意思是完整的分辨率图像），因此当用户选择列表上的第二个图像时，它已经预先加载

问题是，当缩略图中的第二个图像开始预加载时，浏览器真的很慢，感觉就像是要挂起，看起来像是占用了太多的内存或CPU，我真的不知道。

有没有办法像平行预装它？或者可能是另一种拥有“快速加载”图片库的方式？我一直在考虑让每个图像的两个版本分辨率非常低，用作占位符，然后加载真实图像并替换它（我认为这就是Google Plus Gallery的工作方式）

我的主要目标是拥有一个真正非常快的画廊，因为当用户点击图像（每个文件为200~300kb）时，它可能会有点慢

谢谢

Answer 1

如何使用CSS sprites技术制作缩略图？这将允许您拥有一个包含所有缩略图的大图像。

预加载所有图像的方法似乎有点笨拙（没有人担心带宽使用？）。为了快速交付，您可以使用广告CDN (content delivery network)来托管它们。

Answer 2

提供您尝试预加载图片的示例？ 并行预加载多个图像的最简单示例类似于

<script type="text/javascript">
    var photos = ["/images/foto1.jpg", "/images/foto2.jpg", "/images/foto3.jpg"];
    var images = new Array();
    for(var i = 0; i < photos.length; i++)
    {
        images[i] = new Image();
        images[i].src = photos[i];
    }
</script>

Answer 3

Richard Ev给出了一个很好的答案。我想添加另一种可能有用的内容交付技术，即在多个子域上传播资源。可以找到最佳解释（包括限制等）here，但this IE link和this paper也很好。

基本上由于实施旧HTTP标准的浏览器限制，图像不能以高并行化（或任何内容 - 标准量化开放连接）下载，但您可以通过传播欺骗浏览器打开更多连接多个子域上的资源交付。正如文章中提到的那样，这种传播有一个上限，实际上它会减慢。

希望这有帮助（它可能相关或不相关），或至少教你一些新的东西。