html - 如何加载多个惰性CSS加载文件

Question

我想使用 google page speed 推荐的延迟加载 css 技术。首先，我尝试将多个 css 文件合并到一个文件中，但我遇到了 Bootstrap 覆盖字体大小的问题。我不知道为什么。我已经检查文件安排。 Bootstrap 首先加载。但是它仍然覆盖。

所以我想用 Javascript 加载多个 css 文件。这是谷歌的代码:

<script>
  var cb = function() {
    var l = document.createElement('link'); l.rel = 'stylesheet';
    l.href = 'css/test.css';
    var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(cb);
  else window.addEventListener('load', cb);
</script>

如何使用此代码加载多个文件？

Answer 1

var cb = function(href) {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = href;
        var h = document.getElementsByTagName('head')[0]; h.appendChild(l); 
      };

使用不同的样式表，根据需要多次调用 cb()

cb('css/style1.css');
cb('css/style2.css');