如何控制html页面加载完以后再显示全部

Posted 2023-05-16

我做了一个页面，上面有很多内容，包括文字图片。

但是我刷新的时候，图片会突然空白一下，然后再显示出来。看起来非常不舒服。

我想有什么办法可以判断让页面加载完所有内容，包括图片什么的，然后再渲染出来呢？这样整个页面白一下是不要紧的，至少比页面中突然白个正方形好看多了。我需要兼容IE和firefox。

我的思路是做 一个div，然后把整个body放进去，然后用js判读完以后再显示这个div，不知道这个思路可以否。本人对js不是很熟。希望大家能帮助我。
没有人给一些代码吗？？？“？ 7.15继续发问

参考技术A 我个人觉得，显示一部分比先空白再完全显示要好很多，比较符合用户体验。而且，用js来控制，会出现不可预料的情况。 参考技术B 网页的显示模式，这个应该跟浏览器有关吧，我记得用IE的时候就是一下子全出来，用火狐的时候就是一点点出来的。 参考技术C 你的思路是对的，可以采用2个div，其中一个在前面，一个在后面，前面的先显示，里面放一个页面正在加载中的小图片，小flash都可以。
后面的div开始加载内容，在页面上随时监测加载是否完毕，如果加载完毕，将前面的div隐藏，后面的div提到前面来即可。本回答被提问者采纳

如何先显示页面然后加载自定义字体？

【中文标题】如何先显示页面然后加载自定义字体？

【英文标题】：How to display page first then load custom fonts?

【发布时间】：2013-08-27 10:33:24

【问题描述】：

我有一个时间敏感的网页，我希望它先显示该页面，然后再加载任何自定义字体。换句话说，页面将首先显示为好像没有加载字体一样。

这意味着自定义字体（如果被浏览器缓存）只会在用户第二次及以后访问该页面时使用。

我试过了：

<style>
@font-face 
    font-family: 'FontName'; 
    src: url('http://domain.com/fonts/font.ttf');

</style>

但它不会后加载字体。这意味着页面加载会延迟。

在没有 Javascript 的情况下实现此功能可能有哪些解决方案/技巧？

【问题讨论】：

页面加载后能否通过 jquery/js 更改样式？

@BrianAdkins，没有 JavaScript .....

天啊！ ...完全错过了。

所以你有一个时间敏感的网页，你想加载像字体这样的大量外部二进制 blob。好吧，您想同时兼顾两者是件好事，但您有没有想过这根本行不通？

@hakre，字体是可选的补充。实际上，我希望优先考虑减少页面加载时间。

【参考方案1】：

有哪些解决方案可以在不使用 Javascript 的情况下实现此功能？

不可能。当字体是整个页面的一部分时，您不能加载整个页面然后加载字体。这是自相矛盾的。

使用 javascript，您可以更改页面，以便拥有一整页，然后使其更加“完整”。

【讨论】：

“一些解决方案”是什么样的？

【参考方案2】：

这是一个艰难的想法......但这是一个开箱即用的笨拙想法......不知道它是否有效，它可能会被否决。 ：

使用两个几乎相同的页面：

加载不使用自定义字体的页面“A”，除了底部的一些文本使用自定义字体的内联样式呈现。希望这能让浏览器有机会缓存​​字体。

不使用 js（元刷新？）重定向到页面“B”，除了应用了缓存字体外，该页面具有相同的内容。

但是，如果没有 js，我想不出一种正确计时的方法，所以你会陷入竞争状态。

【讨论】：

但即使是底部的文字也需要浏览器预先下载字体，这违背了尝试后加载字体的目的......