jQuery:按需加载css +完成回调
jQuery:按需加载css +完成回调
提问于 2010-08-17 01:23:09
我想按需加载CSS文件(按例)。运行一个返回要加载的CSS文件的XML请求)，例如style1.css，style2.css .
那么，在jQuery (或插件)中有什么方法可以解决这个问题吗？
- 批量加载多个文件+将所有CSS-文件添加到dom中。
- 完成加载时:触发回调(例如警告“所有样式表都已完成加载！”)；
其思想是:通过xmlhttp加载xmlhttp，加载+添加所需的css-文件，然后-在完成任何操作后，显示该html。
知道吗？
谢谢！
回答 8
Stack Overflow用户
发布于 2013-07-25 12:46:12
如何根据请求加载多个 CSS文件和回调
注意:没有x域权限，$.get将只加载本地文件。
工作演示
请注意，文本“所有css加载”显示在加载后，但在应用CSS之前。或许还需要另一种解决办法来克服这一问题。
$.extend({
getManyCss: function(urls, callback, nocache){
if (typeof nocache=='undefined') nocache=false; // default don't refresh
$.when.apply($,
$.map(urls, function(url){
if (nocache) url += '?_ts=' + new Date().getTime(); // refresh?
return $.get(url, function(){
$('<link>', {rel:'stylesheet', type:'text/css', 'href':url}).appendTo('head');
});
})
).then(function(){
if (typeof callback=='function') callback();
});
},
});用法
var cssfiles=['https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cerulean/bootstrap.min.css'];
$.getManyCss(cssfiles, function(){
// do something, e.g.
console.log('all css loaded');
});若要强制刷新css文件，请添加true
$.getManyCss(cssfiles, function(){
// do something, e.g.
console.log('all css loaded');
}, true);Stack Overflow用户
发布于 2014-09-16 11:25:22
@Pop面条给出的答案是不正确的，因为回调不是在加载所有项之后执行的，而是在$.each循环完成时执行的。原因是，$.each操作不返回延迟对象(这是$.when所期望的)。
下面是一个经过修正的示例：
$.extend({
getCss: function(urls, callback, nocache){
if (typeof nocache=='undefined') nocache=false; // default don't refresh
$.when.apply($,
$.map(urls, function(url){
if (nocache) url += '?_ts=' + new Date().getTime(); // refresh?
return $.get(url, function(){
$('<link>', {rel:'stylesheet', type:'text/css', 'href':url}).appendTo('head');
});
})
).then(function(){
if (typeof callback=='function') callback();
});
}
});Stack Overflow用户
发布于 2010-08-17 01:28:29
下面是我加载它的方式：
$(document).ready( function() {
var css = jQuery("<link>");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "path/to/file/style.css"
});
$("head").append(css);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3498647
复制相关文章
相似问题
腾讯云开发者
