优化图像加载时间.(思考方式不同)

我创建了一个交互式图像的东西......但加载需要一点时间.

交互式图像的东西位于:

southernwindowdesign.com

它使用5个图像逐步浏览每个状态(通过单击和拖动).我想保持图像的高品质; 所以,任何进一步的jpeg压缩都会消失(包括punypng和smush.it).

有什么减少加载时间的想法？我愿意冒险使用数据URI,画布,PNG压缩(酷)等.

任何想法或指针都会有所帮助.

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

我希望有人知道如何利用每个图像中的冗余像素.有没有办法将所有图像编码成一个文件,并使用javascript的canvas的getImageData()以一种聪明的方式读出它们？

我在http://www.eswd.com/southern/test.jpg上尝试了一种getImageData方法,由于jpeg的无损(质量= 100!= 100%),我想出了这个方法:http://www.eswd. com/southern/test.aspx.这不好.使用相同的技术将图像保存为PNG导致文件大小比具有所有数据的jpeg(没有红色边框)更大.

我正在考虑尝试使用.APNG并以这种方式读取像素数据......但由于格式在开发过程中如此早,所以看起来根本不会缩小文件大小......而且我我不确定画布是否会让我阅读动画中的各个PNG帧.

整个页面加载会产生40个http请求,包括大约20个徽标的图像请求,以及在门滑动图像之前加载的请求.用雪碧那些其他20张图片.然后,在装载main.js之后,门滑动图像才会加载.那个文件只有1kb - 你可能没有从缓存中获得太多好处.我认为你应该尝试在页面中内联该脚本,这样它可以更快地加载门滑动图像.

您应该使用Firebug网络面板或HttpWatch之类的工具,它可以让您查看资源加载的瀑布图以优化请求,以便尽快加载门滑动图像.在Firebug网络面板上阅读这篇文章,以确保您使用的版本可以为您提供最准确的时间.