一次展示整个页面内容

Question

7

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

- Srikanta

由于大小的原因，图像加载需要花费时间。 - Partap

2

在我看来，在显示任何内容之前等待所有图片加载完毕并不是一个好主意。这会给用户带来糟糕的体验。要着重优化页面的性能，尝试减小页面的大小。 - Fabrizio Calderan

这似乎与JavaScript、Ajax或jQuery无关，更多地涉及客户端/服务器HTTP通信。 - RobG

2个回答

0

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

- SteveP

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Niet the Dark Absol · Accepted Answer

我喜欢尽可能地优化我的图片。

PNG图片

你可以使用pngcrush来为你优化PNG文件，但我个人发现一旦我用它处理完后，pngcrush只会让文件变得更大。

在所有可能的情况下都使用索引PNG。这将限制你使用256种颜色，并且大多数图形编辑器不允许在Indexed-PNG中使用部分透明度（但是这是可能的 - 你只需要正确的编辑器。我使用带有GD图像库的自定义PHP脚本），但你可以期望将文件大小降至原始大小的一小部分。
减少整体颜色数量。PNG压缩最适合具有相同颜色块的图像，因此减少颜色数量可以提高压缩效果。

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

减少帧数。尽可能避免重复帧，并将前一帧的显示时间延长。
如果可能，使用 combine 而不是 replace。您将再次遇到透明区域的问题，但通过使用 combine，您可以使每个后续帧仅更改... 变化的内容。这避免了仅有一小部分更改时重新编写整个图像的冗余。GIMP 有一个有用的过滤器 "Animation > Optimize for GIF"，可以为您完成此操作。
尽量减少颜色。GIF 仅限于256种颜色，但如果您将自己限制在32种左右，您将获得一个更小的文件。

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

JPG 对于照片非常好用，但相机往往会写入大容量的文件。

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

这样做，你就会非常好。