一次显示页面内容

Question

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

Answer 1

我更喜欢优化我的图像。

PNG图像

您可以使用pngcrush为您优化PNG文件，但我个人发现，一旦我完成它，pngcrush只能成功地使它更大。

• 尽可能使用Indexed-PNG。 这将限制你的256种颜色，大多数图形编辑器不允许在Indexed-PNG中部分透明（但它可能 - 你只需要正确的编辑器。我使用GD图像库的自定义PHP脚本）但你可以期望将文件大小降低到只是它的一小部分。
• 减少整体颜色的数量。 PNG压缩最适用于相同颜色的块，因此减少颜色数可以提高压缩效果。

GIF图片

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

• 减少帧数。 不惜一切代价避免重复帧，只需将前一帧设置为具有更长的显示时间。
• 如果可能，使用combine而不是replace 。 您将再次遇到透明区域的问题，但通过使用combine您可以让每个后续帧仅更改...更改的内容。 如果只有一小部分发生变化，这就避免了重写整个图像的冗余。 GIMP有一个有用的过滤器“动画>优化GIF”，它将为您完成此操作。
• 尽可能减少颜色。 GIF限制为256种颜色，但如果你可以将自己限制在32左右，你将得到一个小得多的文件。

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

JPG图片

JPG适用于照片，但相机倾向于编写MASSIVE文件。

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

---

以上内容可帮助您减少图像占用的尺寸。 显然，您还应该适当地缓存图像，因此只需要检索一次。 还要确保在图像元素上指定width和height ，以便浏览器可以为它们保留空间并避免在加载时跳转...

你应该很好。

Answer 2

如果不知道页面的外观，很难说其他选项是什么，但一种选择是为图像保留空间，以便页面文本快速呈现在正确的位置，然后加载图像。