Javascript 优化图像加载时间。（思维方式不同）

我已经创建了一个交互式图像的东西…但它需要一点太长的时间来加载

交互式图像对象位于：

southernwindowdesign.com

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

有没有减少加载时间的想法？我愿意冒险使用数据URI、画布等

任何想法或建议都会很有帮助

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

我希望有人知道如何利用每张图像中的冗余像素。是否有一种方法可以将所有图像编码到一个文件中，并以某种巧妙的方式使用javascript的canvas的getImageData（）读取它们

我尝试了一种getImageData方法，由于jpeg的无损性（质量=100！=100%），我得出以下结论：。这是不好的。使用相同的技术将图像保存为PNG会导致文件大小大于包含所有数据的jpeg（无红色边框）

---

我正在考虑尝试使用.APNG并以这种方式读取像素数据……但由于该格式在开发之初似乎根本不会缩小文件大小……而且我不确定canvas是否允许我读取动画中的单个PNG帧。

是否将一幅图像用作精灵？

---

整个页面加载会产生40个http请求，包括大约20个徽标图像请求，这样就可以在滑动门图像之前加载。对其他20幅图像进行精灵化处理。然后，在加载main.js之后才会加载滑动门图像。该文件只有1kb——缓存它可能不会给您带来太多好处。我认为您应该尝试在页面中内联该脚本，以便它可以更快地加载滑动门图像

---

您应该使用Firebug net panel或HttpWatch之类的工具来查看资源加载的瀑布图，以优化请求，从而尽快加载滑动门图像。阅读以确保您使用的版本能够为您提供最准确的时间安排。

我寻找了几种图像内容优化方法，但唯一符合您要求的是基本门图像，请注意，网页上的底部条带已被覆盖。那是可以剪掉的。不过，它最多只能保存几个字节。

您可以做很多事情

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

您可能希望关注可感知的性能。对于大型图像，一个想法是将它们加载到PageOnLoad处理程序中，这样它们就不会延迟呈现页面其余部分所需的时间

除了精灵，您还可以在多个子域之间分割图像，以提高下载并行性

一件小事：可以删除.ico文件的meta标记。现在的情况是，这是第一批加载的图像之一；这不是优先事项，所以可以等待

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

---

如果有帮助的话，我在书中写了一整章关于这些类型的优化，包括如何控制图像加载顺序等：

加载HTML需要7秒钟？它只有6kb，对我来说只花了147ms，所以我不认为有服务器问题。可能是DNS？第二次，在IE而不是FF中，速度要快得多，尽管我的ISP使用了透明代理，所以这可能就是原因。现在刚刚做了一些cntl刷新，IE中的时间从0.5秒到2秒不等。我在新西兰使用的是11Mbps的DSL线路。顺便说一句，你的内容是用deflate而不是gzip压缩的：好久没看到了！听起来是一些不错的建议。我已经摆脱了加载图像和favicon（它曾经是一个png，由meta提供）。我使用deflate是因为这篇帖子：FWIW，我知道你说任何进一步的压缩都已经过时了。。。但我真的认为你的JPG比他们需要的要大得多。我能从step1.jpg一个人身上省下将近370公里，没有明显的差别。（Photoshop CS2，保存到web 60%，好眼睛，伽马校准，环境照明等）我相信你也可以从其他展示图像中剔除很多。这只是需要推送大量数据。我同意zen的观点——第一张图像（541kb）需要3秒钟才能加载。这些徽标在网站的其他地方使用，这就是它们分开的原因。我会延迟加载那些你无法在pageload上加载的。不管这些徽标是否在其他地方使用。如果您将“其他20个图像”作为精灵加载，则其缓存将在整个站点中随意重用。