3

我已经创建了一个交互式图像的东西......但加载时间太长了。

交互式图像的东西位于：

southernwindowdesign.com

它使用 5 个图像来逐步浏览每个状态（通过单击和拖动）。我想保持图像的高质量；因此，任何进一步的 jpeg 压缩都结束了（包括 punypng 和 smush.it）。

有什么减少加载时间的想法吗？我愿意冒险使用数据 URI、画布、PNG 压缩（酷）等。

任何想法或指示都会有所帮助。

更新： 感谢所有提供建议的人，如果我使用了你提供的建议，我给了你一个加分。我已经设置了另一个静态子域 (s2)，它应该在接下来的几个小时左右传播。今天晚些时候，我可能会将一些图像切换到这个新的子域。我还更改了加载图像的顺序，并在这里和那里进行了一些其他优化。

我希望有人知道如何利用每张图像中的冗余像素。有没有办法将所有图像编码到一个文件中，并以某种巧妙的方式使用 javascript 画布的 getImageData() 将它们读出？

我在http://www.eswd.com/southern/test.jpg上尝试了 getImageData 方法，由于 jpeg 的无损（质量=100 ！= 100%），它提出了这个：http://www.eswd。 com/southern/test.aspx。这不好。使用相同的技术将图像保存为 PNG 会导致文件大小大于包含所有数据的 jpeg（无红色边框）。

我正在考虑尝试使用 .APNG 并以这种方式读取像素数据……但由于该格式还处于开发的早期阶段，它似乎根本不会缩小文件大小……而且我我不确定画布是否会让我阅读动画中的各个 PNG 帧。

4

4 回答 4

7

整个页面加载发出 40 个 http 请求，包括大约 20 个徽标图像请求，以及在您的门滑动图像之前加载。Sprite 其他 20 张图像。然后直到 main.js 加载后，才加载门滑动图像。该文件只有 1kb ——您可能不会从缓存它中获得太多好处。我认为您应该尝试在页面中内联该脚本，以便它可以更快地加载门滑动图像。

您应该使用像 Firebug 网络面板或 HttpWatch 这样的工具，让您看到资源加载的瀑布图来优化请求，以便尽快加载门滑动图像。在 Firebug 网络面板上阅读这篇文章，以确保您使用的版本能够为您提供最准确的时间。

于 2009-12-18T04:13:50.343 回答
4

制作一张您用作精灵的图像？ http://www.alistapart.com/articles/sprites/

于 2009-12-18T04:01:15.000 回答
1

你可以做很多事情。

对我来说，HTML 本身第一次加载大约需要 7 秒——大约是总时间的一半。

您可能希望专注于感知性能。对于大图像，一种想法是在页面 OnLoad 处理程序中加载它们，这样它们就不会延迟呈现页面其余部分的时间。

除了 sprite，您还可以在多个子域之间拆分图像以增加下载并行度。

一件小事：您可以删除 .ico 文件的元标记。现在的方式，这是第一个加载的图像之一；这不是优先事项，因此可以等待。

此外，loading.gif 动画 gif 是在 step1.jpg 到 step5.jpg 之后加载的。如果你真的需要它，你应该先加载它。

如果有帮助，我在书中写了一整章来介绍这些类型的优化，包括如何控制图像加载顺序等：Ultra-Fast ASP.NET。

于 2009-12-18T04:42:49.907 回答
0

我寻找了几种图像内容优化来应用，但唯一满足您要求的是基础门图像，http://s.southernwindowdesign.com/i/home/animateDoor2/step1.jpg 注意底部条被覆盖在网页上。那是可以剪掉的。不过，它不会节省超过几个字节。

于 2009-12-18T04:28:32.203 回答