我已经创建了一个交互式图像...但是加载时间有点太长了。
交互式图像位于:
southernwindowdesign.com
它使用 5 张图像逐步显示每个状态(通过单击和拖动)。我想保持图像的高质量；因此，任何进一步的 jpeg 压缩都已结束(包括 punypng 和 smush.it)。
有什么减少加载时间的想法吗？我愿意冒险使用数据 URI、 Canvas 、PNG compression (cool)等
任何想法或指示都会有所帮助。
更新: 感谢所有给建议的人，如果我使用了你给的建议，我给了你一个加分。 我已经设置了另一个静态子域 (s2)，它应该会在接下来的几个小时左右传播。今天晚些时候，我可能会将一些图像切换到这个新的子域。 我还更改了图像的加载顺序，并在这里和那里进行了一些其他优化。
我希望有人知道一种方法来利用每张图像中的冗余像素。有没有一种方法可以将所有图像编码到一个文件中，并以某种巧妙的方式使用 javascript 的 Canvas 的 getImageData() 将它们读出？</p>
我在 http://www.eswd.com/southern/test.jpg 上尝试了 getImageData 方法其中，由于 jpeg 的无损(质量 = 100 != 100%)，得出以下结果:http://www.eswd.com/southern/test.aspx .这是不好的。使用相同的技术将图像保存为 PNG 文件比包含所有数据(无红色边框)的 jpeg 文件更大。
我正在考虑尝试使用 .APNG 并以这种方式读取像素数据...但是由于该格式的开发还处于早期阶段，所以它似乎根本不会缩小文件大小...而且我不确定 Canvas 是否允许我读取动画中的各个 PNG 帧。
最佳答案
整个页面加载产生了 40 个 http 请求，包括大约 20 个对 Logo 的图像请求，以及在您的门滑动图像之前加载的图像请求。对其他 20 张图像进行雪碧处理。然后门滑动图像在 main.js 加载后才会加载。该文件只有 1kb——您可能不会从缓存中获得太多好处。我认为您应该尝试在页面中内联该脚本，这样它可以更快地加载门滑动图像。
您应该使用诸如 Firebug 网络面板或 HttpWatch 之类的工具来查看资源加载的瀑布图以优化请求，以便门滑动图像尽快加载。阅读this post on the Firebug net panel以确保您使用的版本能够为您提供最准确的计时。
关于javascript - 优化图像加载时间。 (换个思路)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1926192/