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

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

也许你可以尝试一下：

Yep Nope

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

Answer 3

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

使用JS以编程方式加载CSS

3 个答案: