javascript – 一次显示页面内容

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

解决方法

我更喜欢优化我的图像.

PNG图像

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

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

gif图片

特别是对于动画,你可以做很多事情.

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

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

JPG图片

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

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

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

你应该很好.