jQuery:按需加载 css + 完成后回调

Question

我想按需加载 CSS 文件(例如，通过运行返回要加载的 CSS 文件的 XML HTTP 请求)例如 style1.css、style2.css ..

那么在 jQuery(或插件)中有没有办法做到这一点？

• 批量加载多个文件 + 将所有这些 CSS 文件添加到 dom 中
• 加载完成后:触发回调(如提示“所有样式表已加载完成!”)；

思路是:loading html通过xmlhttp ，加载+添加需要 css文件，然后 - 完成所有操作后，显示 html .

有什么想法吗？

谢谢!

Answer 1

如何根据请求使用回调加载多个 CSS文件
注意:没有 xdomain 权限，$.get 只会加载本地文件

WORKING DEMO
请注意，文本“所有 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);