javascript - 如何在加载非常大的图像时显示加载屏幕？

Question

我有一张 5MB 的图片，加载大约需要 2-3 分钟。当它加载时，我想要一个加载屏幕。加载图像后，加载屏幕将消失。 (图片是sprite图片，我是用CSS分割的)。

如果这是可能的，那我该怎么做呢？如果这不可能，那么我可以使用哪些其他方法来隐藏图像的加载(或减小图像大小)？

Answer 1

That image is a sprite image.

I use css to split them.

除非有未说明的附加信息，否则在 5MB 时，您已经失去了 CSS Sprite 的任何优势。将其拆分为单独的文件并按需延迟加载。

如果您正在使用/可以使用 jQuery this plugin延迟加载做得很好。

还要确保您使用的是最好的 compression可能的。即使您必须使用无损压缩，仍然可以通过从图像文件中删除元数据来获得一些 yield 。

Photoshop 中的“Save for Web”非常适合平衡有损压缩(质量与大小)，还可以让您选择不在图像文件中嵌入元数据。您可以使用像 Yahoo 这样的工具 SmushIt如果您无法访问 Photoshop。