使用js延迟加载css

时间:2015-05-09 07:54:27

标签: javascript css lazy-loading

如果我使用这样的东西来延迟加载我的一些css文件,是否可以在其中添加2个css文件或者只能加载1个?

<script>
var cb = function() {
            var l = document.createElement('link'); 
            l.rel = 'stylesheet';
            l.href = 'yourCSSfile.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 :(得分:5)

function loadCss(filename) {
    var l = document.createElement('link');
    l.rel = 'stylesheet';
    l.href = filename
    var h = document.getElementsByTagName('head')[0];
    h.parentNode.insertBefore(l, h);
}

function cb() {
    loadCss('yourCSSfile.css');
    loadCss('yourCSSfile2.css');
}

window.addEventListener('load', cb);

<强> http://jsfiddle.net/vs9wLjvp/