Question

延迟加载CSS文件 - 仅当对象在视口中时加载css

我正在使用此来源的进度条:(纯css3进度条 - http://designshack.net/articles/css/animating-personal-skill-bars-with-css3-keyframes/）它运作良好，但我希望动画仅在进度条位于侧面的视口中时才会开始。

我尝试修复它以加载特定的css文件异步 - 但它不起作用。

    <script>
    function loadCss(skills) {
    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('.css');
    }
    var raf = requestAnimationFrame || 
    mozRequestAnimationFrame ||  
    webkitRequestAnimationFrame || 
    msRequestAnimationFrame;
    if (raf) {
    raf(cb);
    } else {
    window.addEventListener('load', cb);
    }
    </script>

    <noscript><link rel="stylesheet" href="css/skills.css"></noscript>
    //Fallback//

也许有人可以帮助我。我需要一个控制关键帧动画的功能（单独的css文件！）或者如果对象在视口中，则加载整个css文件。

最好的问候

**延迟加载CSS文件 - 仅当对象在视口中时加载css **

0 个答案:

延迟加载CSS文件 - 仅当对象在视口中时加载css