Javascript 一次显示页面内容

我有一个网站，在

index.php

我面临的问题是整个页面没有立即加载，我认为加载图像需要一些时间

---

所以我所做的是，我先显示一个加载图像，然后在一段时间后显示页面，这就解决了问题。但是我很想知道还有其他更好的方法吗？

在不知道页面外观的情况下，很难说还有哪些其他选项可用，但其中一个选项是为图像保留空间，以便页面文本快速呈现在正确的位置，然后再加载图像。

我更喜欢优化我的图像

PNG图像 你可以用它来优化你的PNG文件，但我个人发现，一旦我完成了pngcrush，它只能成功地使它更大

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

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

• 减少帧数。不惜一切代价避免重复帧，只需将前一帧设置为具有更长的显示时间
• 如有可能，使用

  组合

  而不是

  更换

  。您将再次遇到透明区域的问题，但通过使用

  combine

  ，您可以让每个后续帧仅更改以下内容。。。变化。这避免了在只有一小部分更改时重新写入整个图像的冗余。GIMP有一个有用的过滤器“Animation>optimizeforgif”，它可以为您实现这一点
• 尽量减少颜色。GIF被限制为256色，但如果你能将自己限制为32色左右，你会得到一个小得多的文件

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

JPG图像 JPG非常适合拍摄照片，但相机有写入大量文件的倾向

• 玩转压缩因子。从40%左右开始，慢慢提高，直到看起来可以接受为止。GIMP将向您显示预览和生成的文件大小，因此请利用它找到一个可接受的折衷方案
• 缩小图像的比例。你不需要900万像素，也不需要相机现在拍摄的高分辨率图像

---

以上内容将有助于减少图像的大小。显然，您还应该适当地缓存图像，这样它们只需要检索一次。还要确保在图像元素上指定

宽度

和

高度

，以便浏览器可以为它们保留空间，并避免在加载时四处跳跃

---

而且你应该做得很好。

由于图像大小的原因，加载图像需要花费大量时间……嗯，请等待所有图像，然后再显示不是一个好主意。感知到的体验对用户来说是可怕的。提高性能，尝试优化页面大小这似乎与javascript、ajax或jquery无关。更多的是关于客户机/服务器HTTP通信。