Question

假设我有一个webapp，其中有1000个图像，如

<img src="something" />
<img src="something" />
<img src="something" />
.
.
.
<img src="something" />

这会使页面加载速度变慢，因为每个图像都会从请求中检索并显示在页面上。

我的问题是，是否有其他方法可以最大限度地缩短页面加载时间。

我试过的是我尝试使用base64对这些图像进行编码，但它会增加网页的大小。

任何指导，帮助表示赞赏。

Answer 1

雅虎！为网站提供了一个很好的优化技术列表。查看此链接（https://developer.yahoo.com/performance/rules.html）

在你的情况下，一页的1000张图片很多。考虑将页面分成多个页面，让用户用分页切换它们。

如果所有内容都必须在同一页面上，请考虑延迟加载。只有在加载html后才会加载图像。这可以与ne1410s建议的滚动加载相结合。当用户向下滚动时，将加载新图像。（Jquery有这种类型的加载插件。这是一个http://www.appelsiini.net/projects/lazyload）

考虑在其他区域优化您的网站（它也会为您提供额外的性能）。例如，在用户浏览器中缓存图像。当他们返回您的网站时，这些图片不会再次从您的服务器下载。

Answer 2

考虑延迟加载，只会按需加载图像（滚动页面时）。

斯科特·汉塞尔曼（Scott Hanselman）an interesting article就如何使用懒惰装载机在云端省钱来做出了贡献。

简单的解决方案是在用户滚动时延迟加载图像，从而只为您看到的图像使用带宽。我看着迈克 Tupola的jQuery LazyLoad插件以及其他一些类似的插件脚本。如果你愿意，那里还有Luis Almeida的轻量级Unveil 更少的花里胡哨。我最终使用标准的Lazy Load。

延迟加载库非常易于使用，例如：

<script>
     $(function() {
      $("img.lazy").lazyload({effect: "fadeIn"});
  });
</script>

除此之外，确保所有图像都针对Web进行了优化，尺寸/质量是正确的，如果图像是静态的并使用缓存，则使用精灵。

Answer 3

如果您要显示超过1000张图片，那么您的设计中会出现问题。没有充分的理由在一个页面或初始页面上显示超过1000个图像。