一次显示页面内容

Question

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

Answer 1

我更喜欢优化我的图像。

PNG图像

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

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

GIF图像

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

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

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

JPG图像

JPG非常适合拍照，但相机有写MASSIVE文件的倾向。

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

---

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

你应该很好。

Answer 2

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