优化图像加载时间。(思维方式不同)
我已经创建了一个交互式图像thing...but --它加载起来有点太长了。
交互式图像的位置是：
southernwindowdesign.com它使用5个图像来遍历每个状态(通过单击和拖动)。我想要保持高质量的图像；所以，任何进一步的jpeg压缩都是不存在的(包括冲印和smush.it)。
有减少负载时间的想法吗？我愿意冒险使用数据URI、画布、PNG压缩(酷)等等。
任何想法或建议都是有帮助的。
更新:感谢每个给我建议的人，如果我使用了你给的建议，我就给你一个加一。我已经设置了另一个静态子域(s2)，它应该在接下来的几个小时内传播。今天晚些时候，我可能会将一些图像切换到这个新的子域。我还更改了加载图像的顺序，并在这里和那里进行了一些其他优化。
我希望有人知道如何利用每幅图像中多余的像素。有没有一种方法可以将所有图像编码到一个文件中，并以某种巧妙的方式使用javascript的画布的getImageData()将它们读取出来？
我在http://www.eswd.com/southern/test.jpg上尝试了一种http://www.eswd.com/southern/test.jpg方法，由于jpeg的无损(Quality=100 != 100%)，它提出了这样的方法：http://www.eswd.com/southern/test.aspx。这是不好的。使用相同的技术将映像保存为PNG会导致比具有所有数据的jpeg更大的文件大小(没有红色边框)。
我正在考虑使用.APNG并读取way...but的像素数据，因为该格式在其开发过程中非常早期，它似乎不会缩小all...and的文件大小，我不确定画布是否允许我读取动画中的各个PNG帧。
回答 4
Stack Overflow用户
发布于 2009-12-18 04:13:50
整个页面加载40 http请求，包括大约20个图像请求的标志和这样的加载之前，您的门滑动图像。雪碧还有20张照片。然后，门滑动图像不会加载直到main.js加载。该文件只有1kb--您可能不会从缓存它得到多少好处。我认为你应该尝试在页面中插入这个脚本，这样它就可以更快地加载门滑动图像。
您应该使用像Firebug面板或HttpWatch这样的工具，它可以让您看到资源加载的瀑布图，从而优化请求，以便门滑动图像能够尽快加载。阅读此文章位于Firebug net面板上，以确保您使用的版本给您提供了最准确的时间。
Stack Overflow用户
发布于 2009-12-18 04:01:15
制作一张用作雪碧的图片？http://www.alistapart.com/articles/sprites/
Stack Overflow用户
发布于 2009-12-18 04:42:49
你能做的很多。
对我来说，HTML本身大约花了7秒的时间来第一次加载--大约是全部时间的一半。
你可能想把注意力集中在感知的表现上。对于大型图像，一个想法是将它们加载到页面OnLoad处理程序中，这样它们就不会延迟呈现页面其余部分的时间。
除了精灵之外，您还可以将图像拆分到多个子域中，以增加下载并行性。
有一点是次要的:您可以删除.ico文件的元标记。现在的情况是，这是第一批加载的图像之一；它不是一个优先级，所以可以等待。
另外，在步骤1.jpg之后加载loading.gif动画gif到步骤5.jpg。如果你真的需要它，你应该先加载它。
为了避免有帮助，我在我的书中写了整整一章，讨论这些类型的优化，包括如何控制图像加载顺序等：超快ASP.NET。
https://stackoverflow.com/questions/1926192
复制相似问题
腾讯云开发者
