如何加载多个lazy css加载文件

时间:2015-05-19 09:08:20

标签: html css twitter-bootstrap

我想使用google page speed推荐的懒加载css techinque。 首先,我尝试将多个css文件合并到一个文件中,但我遇到问题引导程序覆盖了字体大小。我不知道为什么。我检查了文件安排。 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>

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

1 个答案:

答案 0 :(得分:4)

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');