没有完整性的 Css 预加载也可以工作,并且 rel=stylesheet 也可以。但我想做的是制作具有完整性的异步 css。我错过了什么吗?
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" as="style" onload="this.rel='stylesheet'">
<noscript><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY"></noscript>
我的浏览器无法使用此代码加载 css。空的开发控制台。这本打算很容易,为什么会这样?
最佳答案
它工作正常,这是一个证明: 我有一个 Bootstrap 样式的按钮,它将在完成预加载 1.5 秒后获得其样式。
<button type="button" class="btn btn-primary">i will become bootstrappified after 1.5seconds!</button>
<script>
function updateRel(cssPreload) {
if (cssPreload.rel !== 'stylesheet') {
setTimeout(function() {
console.log('will take effect now!');
cssPreload.rel = 'stylesheet';
}, 1500);
}
}
</script>
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" as="style"
onload="updateRel(this)">
关于html - 具有完整性的异步 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39257564/