gpt4 book ai didi

html - 强制浏览器在显示页面之前加载 CSS

转载 作者:技术小花猫 更新时间:2023-10-29 12:06:51 25 4
gpt4 key购买 nike

我制作了我网站的移动版本。然而,当加载页面时,该网站首先显示时没有应用 CSS,然后(最多)一秒钟后它应用 CSS 并正确呈现它。此行为在所有浏览器(包括移动浏览器)中都是一致的。

您是否知道我如何强制浏览器先加载 CSS(它的大小非常小)然后然后呈现内容?我已经看到一些关于在 head 之外包含 CSS 文件的内容,但据我所知这是违反规范的,而且我担心这种 hack 可能会在某些移动浏览器上造成障碍。

谢谢!

更新

这是来源

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Albite BOOKS mobile</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<meta name="description" content="Free e-books for Java Mobile phones."/>
<meta name="keywords" content="free ebooks, free books, book reader, albite reader, albite books, java mobile"/>
<meta name="language" content="en_GB"/>
<meta name="classification" content="public"/>

<link rel="shortcut icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- .... -->
</body>
</html>

最佳答案

我相信我找到了一个更好的方法来处理这个...

在输出文件的顶部放置以下内容:

<body>
<div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div>
...
</body>

然后在最后加载的 CSS 文件的最后一行放置:

#loadOverlay{display: none;}

这基本上是用问题来对付自己。加载的第一位可显示 html 在 CSS 加载和处理时在所有内容之上放置一个空白 Canvas ,要加载和处理的最后一位 CSS 移除 Canvas 。根据我的测试,这完全解决了问题。

关于html - 强制浏览器在显示页面之前加载 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4172281/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com