Question

我的网站上大约有10个样式页面，有些页面不同。但是，我不能一开始就全部加载它们，因为某些样式会覆盖其他样式。但是，我想在用户第一次访问该网站后全部加载它们，以使他们在转到该网站上的其他页面时不会出现延迟（由于加载了静态css / js文件）。这基本上就是我想要做的：

# main page
<link rel="stylesheet" href="http://examplestyle.css">

# load via javascript after 2 second delay -- DO NOT display on the current page
<img src="http://otherstylesheet.css" width="0">

我只是通过将css加载为图像来弥补问题，但是基本上，我只是想在用户点击登录页面后预提取http调用。

Answer 1

这在MDN网络文档中：

<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js"></script>
</body>

***不是我的代码，我不相信该代码。

以下是有关CSS预加载的信息的链接：https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

请记住此功能的可用性： https://caniuse.com/#search=preload

Answer 2

我在https://web.dev/defer-non-critical-css/上找到了甚至更好的代码

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

我想您甚至可以将setTimeout()与onload一起使用，这在某些情况下很有用。

如何预加载样式表

2 个答案: