2

我正在开发 Asp.net MVC3 Web 应用程序。我在哪个 appx 上有一个页面。正在加载 100 张不同大小的图像,总共 appx。大小为 1.5MB。

我将努力将这 100 个图像分发到多个主机名,以使其稍后加载更快。但现在我需要你的帮助来优化图像的加载速度。而且我真的不能将 Sprite 用于这些图像。

我特别有兴趣实现一些可以在第一次加载时加载降级图像的东西,然后随着越来越多的字节被下载而逐渐提高图像质量。所以基本上它会首先加载低质量的图像,然后随着更多字节的下载图像质量会提高。

更新: 我见过几个网站可以优雅地加载图像,这意味着一开始它看起来非常粗糙,然后随着时间的推移随着下载的深入,它们的质量会有所提高。

他们是如何做到的呢?

4

2 回答 2

6

在拨号时代,我们使用标签的LOWSRC属性IMG来指向最终图像的低色 GIF 版本。你仍然可以使用它。

<IMG HEIGHT="212" WIDTH="300" ALT="Phydueaux the Cat" SRC="cat.gif" LOWSRC="bwcat.gif">

参见:http ://www.htmlgoodies.com/tutorials/web_graphics/article.php/3479971/So-You-Want-LowSrc-Huh.htm

于 2012-03-27T13:49:55.393 回答
1

假设图像是 JPEG,您可以使用隔行扫描,但我不确定我是否会打扰,我更倾向于确保图像得到适当优化并使用正确数量的主机名来加载它们。

如果您想优化 JPEG,jpegmini.com 可能是目前我们那里最好的优化器。

我会将图像分片到几个主机名上(选择正确的数字会很有趣,我听说六个对于某些人来说是最佳选择,但 YMMV,如果你使用 keep-alive,那么使用这么多实际上可能不好域)

以这样的方式使用主机名,即您想要的前六个(?)图像来自第一个,接下来的六个图像来自下一个主机等,直到您用完所有主机名,然后再次从第一个开始. (选择六个,因为这通常是浏览器维护的并行连接数,因此根据访问者使用的浏览器,您可能希望使用四个)

目的应该是逐步呈现页面,以便顶部的内容在折叠下方的内容之前可见。

于 2012-03-28T08:43:11.853 回答