如何預加載樣式表
[英]How to pre-load a stylesheet
問題描述
我的整個網站大約有 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 調用。
2 個解決方案
解決方案1
3 2018-10-05 21:48:09
這是在 MDN Web 文檔中：
<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
解決方案2
0 2020-08-03 21:02:35
我在https://web.dev/defer-non-critical-css/上發現了這段甚至更好的代碼
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
我想您甚至可以將setTimeout()與onload一起使用，這在某些情況下很有用。
如何在重定向到jquery之前在jquery中預加載（緩存）外部頁面？
[英]How to pre-load (cache) an external page in jquery before redirecting to it?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.