使用JS以编程方式加载CSS

Question

我想要实现以下目标:

• 我有一个服务器端脚本,根据GET参数生成CSS代码
• 根据用户请求,JS现在应该执行以下操作
  • 加载新的CSS文件
  • 加载完成后,淡入新加载的样式

这里的问题是最后一步.

向DOM添加新的CSS文件没有问题,但我怎么知道浏览器何时完成加载文件？在实际加载文件之前,我无法使用新加载的样式启动动画.

或者:是否可以使用异步请求加载CSS文件,并使用Javascript将CSS代码注入DOM而无需手动解析？

非常感谢你!

丹尼斯

Answer 1

我知道这个问题很老了,但是如果有人谷歌这个,这里有一个函数可以让你定义一个回调来让你知道加载样式表的时候:

    var css = function(url, callback) {

         var head = document.getElementsByTagName('head')[0];
         var cssnode = document.createElement('link');

         cssnode.type = 'text/css';
         cssnode.rel = 'stylesheet';
         cssnode.href = url;

         cssnode.onreadystatechange = callback;
         cssnode.onload = callback;

         head.appendChild(cssnode);
     }

Answer 2

这种过滤器有一个很好的库...

也许你可以尝试一下:

是的,不

Yepnope是一种超快速的异步条件资源加载器,允许您只加载用户需要的脚本.