html - 具有完整性的异步 css

标签 html css asynchronous

没有完整性的 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/

相关文章:

html - 修复了 HTML 表格中带有 CSS 的行标题

c# - 递归 WinRT 异步问题

html - 调试 CSS 页面溢出

html - 讲台 CSS : position elements at the bottom of their div

javascript - 如何更改IE浏览器的标志?

html - 文件布局和 Assets 链接?

javascript Canvas 弹出窗口

css - 为什么我的导航栏仍在水平滚动(Bootstrap)

c# - 使用 Dapper.NET 异步 API 时如何遵守 CommandTimeout

javascript - Node.js 中的异步流程