重图像预加载是挂脚本

Heavy image preloading is hanging script

本文关键字：脚本 加载 图像      更新时间：2023-09-26

我在一个具有高分辨率图像(如1280x1400px)的客户端的图像库中工作，实际上我的脚本是这样做的:

  1. 加载第一个图像并显示它
  2. 当第一张图片加载时，加载该图库的所有缩略图(每个200x440px或类似的大小)
  3. 当所有的缩略图加载开始缓存所有的图像(顺序)从缩略图(我的意思是完整的分辨率图像)，所以当用户选择列表上的第二个图像，它已经预加载

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

是否有办法像并行一样预加载它?或者另一种"快速加载"图片库的方式?我一直在考虑有2个版本的每个图像一个非常低的分辨率一个用作占位符，然后加载真实的图像并替换它(我认为这是如何Google +画廊的作品)

我的主要目标是有一个非常非常快的图库，因为它可以有点慢，当用户点击一个图像(每个文件是200~300kb)

谢谢

如何在缩略图中使用CSS精灵技术?这将允许你有一个包含所有缩略图的大图像。

预加载所有图像的方法似乎有点笨拙(没有人担心带宽使用?)。为了快速交付，您可以使用商业CDN(内容交付网络)来托管它们。

Richard Ev给出了一个很好的答案。我想添加另一种可能有用的内容交付技术，即在多个子域上传播资源。最好的解释(包括限制等)可以在这里找到，但是这个IE链接和这篇论文也很值得一读。

本质上是由于浏览器的限制，实现旧的HTTP标准，图像下载不高并行(或任何内容的问题-标准是量化打开的连接)，但你可以欺骗浏览器打开更多的连接，通过分散资源传递到多个子域。正如文章中提到的，这种传播有一个上限，超过这个上限，它实际上就会减慢。

希望这篇文章能有所帮助(可能是相关的，也可能不是相关的)，或者至少能教会你一些新的东西。

提供您如何尝试预加载图像的示例?并行预加载多个图像的最简单示例是

<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>
相关文章：