Как я могу загрузить таблицу стилей через ajax и получить обратный вызов после завершения загрузки

Мне нужно загрузить кучу файлов CSS через ajax и вызвать анимацию, когда таблица стилей завершит загрузку, иначе анимация завершится ошибкой.

То, что я сделал, и работало довольно хорошо, пока я не наткнулся на этот перекрестный -домен, это:

$.get(resource.url, {cache:true}, function(css) {
    //Now that the stylesheet is in the browser cache, it will load instantly:  

    $("head").append($("",{
       rel: "stylesheet",
       type: "text/css",
       href: resource.url
    }));

}).then(function(){
   //Animation here that depends on the loaded css
});

Это работает нормально, пока resource.urlнаходится в том же домене. Как только я попытаюсь загрузить css из другого домена, $.getпотерпит неудачу, как это:

XMLHttpRequest cannot load https://example.com/style.css. Origin https://example.com is not allowed by Access-Control-Allow-Origin.

Поэтому я попытался добавить CORS в заголовок через.htaccess:

    #cross domain access is okay for resources (#107)
     
        Header add Access-Control-Allow-Origin "*"
    

Это добавляет заголовок CORS ко всем ресурсам CSS и JS.

По какой-то причине CORS , похоже, не влияет ни на новейшие версии Chrome, ни на Firefox ().

Я также заметил, что та же политика домена не применяется при выполнении $.getScriptдля js-файлов, но она применяется для$.get:

$.get("https://example.com/script.js", {cache: false}, $.noop, "script"); 

//works regardless of CORS

но:

$.get("https://example.com/script.js", {cache: false}, $.noop); 

//does not work (cross domain policy violation)

Так как CORS не поддерживается широко и даже не решает проблему для современного браузера, мне нужно что-то, что ведет себя как $.getScript, но для таблиц стилей CSS.

Он должен быть асинхронным и иметь механизм обратного вызова.

Любые идеи? Заранее спасибо...