javascript - 一次显示页面内容

Question

我有一个网站，在 index.php
中包含一些图片我面临的问题是整个页面没有立即加载，我认为图像加载需要一些时间
所以我所做的是，我首先显示加载图像，然后在一段时间后显示页面，这解决了问题。但我很想知道有没有其他更好的方法来做到这一点？

Answer 1

我更喜欢优化我的图像。

PNG 图片

您可以使用 pngcrush为你优化你的 PNG 文件，但我个人发现，一旦我完成了它，pngcrush 只会成功地让它变大。

• 尽可能使用 Indexed-PNG。这会将您限制为 256 种颜色，并且大多数图形编辑器不允许 Indexed-PNG 中的部分透明(但有可能 - 您只需要正确的编辑器。我使用带有 GD 图像库的自定义 PHP 脚本)但您可以希望将文件大小降低到原来的一小部分。
• 减少整体颜色的数量。 PNG 压缩最适合相同颜色的 block ，因此减少颜色数量可以提高压缩率。

GIF 图片

特别是对于动画，您可以做很多事情。

• 减少帧数。不惜一切代价避免重复帧，只需将前一帧设置为具有更长的显示时间即可。
• 尽可能使用combine 而不是replace。您将再次遇到透明区域的问题，但是通过使用 combine，您可以让每个后续帧只改变那些……改变的东西。如果只有一小部分发生变化，这避免了重写整个图像的冗余。 GIMP 有一个有用的过滤器“Animation > Optimize for GIF”，它会为您做这件事。
• 尽可能减少颜色。 GIF 仅限于 256 种颜色，但如果您可以将自己限制在 32 种左右，您将获得一个小得多的文件。

使用上述技术，我曾经设法将 8MB 的原始图像数据压缩到 125kb 的 GIF 动画中。

JPG 图片

JPG 非常适合照片，但相机往往会写入大量文件。

• 尝试使用压缩因子。从 40% 左右开始，然后慢慢提高，直到看起来可以接受。 GIMP 将向您显示预览和生成的文件大小，因此请利用它来找到可接受的折衷方案。
• 缩小图像。您不需要 9 兆像素或现在的高分辨率相机......

---

以上应该可以帮助您减少图像占用的大小。显然，您还应该适本地缓存图像，这样它们只需要被检索一次。还要确保在图像元素上指定 width 和 height 以便浏览器可以为它们保留空间并避免在加载时跳来跳去...

而且你应该很不错。