javascript - 设置不同资源的优先级

Question

我正在建立一个网站，为多个皮肤导入多个 css 文件。 有没有办法在加载页面时在样式表上设置不同的优先级。

我希望浏览器首先获取正常的 css、我的 js 和我所有的图片。之后，当页面完全启动并运行时，它可以获取我的其他可选的 css 样式表。 (因为这些是由用户声明“我现在想使用深色 css”触发的)

一个例子来说明我的情况:

<!-- CSS links -->
<link rel="stylesheet" href="./css/transit.css"/>
<link rel="stylesheet" href="./css/transit_dark.css"/>

有没有办法让深色样式表在我的 DOMContent 呈现后加载？

Answer 1

没有纯粹的声明性解决方案。你可以做的是:

• 在初始页面加载后立即插入样式表。不要从“DOMContentLoaded”事件开始，因为那只是 DOM。您可能希望等到页面的“加载”事件指示呈现页面所需的一切(包括 CSS 和图像)已经存在。
• 将其插入为 rel="alternate stylesheet"所以浏览器在选择之前不会应用它。

window.addEventListener("load", function(){
    var l = document.createElement("link")
    l.rel = "alternate stylesheet"
    l.href = "./css/transit_dark.css"
    l.title = "Transit: Dark" // a title is mandatory for alternates
    document.head.appendChild(l)
})

除了让浏览器预加载所有样式表并在其自己的 UI 中提供样式表选择器(Firefox 开箱即用)之外，使用备用样式表在语义上是一种非常好的方式来完成您正在做的事情。