如何解决使用JS编程加载CSS
| 我正在努力实现以下目标: 我有一个服务器端脚本,该脚本根据GET参数生成CSS代码 应用户要求,JS现在应执行以下操作 加载一个新的CSS文件 加载完成后,淡出为新加载的样式 问题是最后一步。 将新的CSS文件添加到DOM没问题,但是我怎么知道浏览器何时完成加载该文件? 在实际加载文件之前,无法使用新加载的样式启动动画。 或者:是否可以使用Async Requests加载CSS文件,并使用Javascript将CSS代码注入DOM中而无需手动解析它? 非常感谢你! 丹尼斯解决方法
有一个很好的库用于这种过滤器...
也许您可以尝试一下:
是的
Yepnope是一种超快速的异步条件资源加载器,它允许您仅加载用户所需的脚本。
,我知道这个问题已经很老了,但是如果有人用谷歌搜索这个问题,下面的函数可以让您定义一个回调,以便在加载样式表时知道:
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);
}
,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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。