javascript - 使用大图像(文件大小)但不影响加载时间？

Question

我的演示是 here .

基本上，我有一个巨大的图像(准确地说是 19160px × 512px，不到 2MB)，我使用 javascript 转换 backgroundx 使其看起来好像正在发生转换。

我无法在不显着破坏图像质量的情况下进一步压缩图像。有没有另一种方法可以使用相同级别的跨浏览器实现这一点，而不依赖于 flash 之类的插件，但加载速度更快？

Answer 1

您是否考虑过将其制作成视频？

它可能会稍微缩短加载时间。

另外，还有一个想法。您是否尝试过只使用第一张和最后一张图片，将最后一张放在第一张上面，给它 opacity:0 并使用 JavaScript(例如 jQuery)淡化它？

效果不会与您现在的效果 100% 相同，但它看起来可能足以取悦客户，并且可以将加载时间减少到最低限度。

如果这两种想法都不适合您，我认为前 10-12 帧可以压缩为 GIF 图像更有效。 (这是一个估计，我还没有尝试过。)您必须将图像拆分为多个 div 才能做到这一点并更改用于切换图像的方法，并且您会有更多请求，但这可能是值得的。