title: How can I load a stylesheet through ajax AND have a callback when the loading is done
body: <p>I need to load a bunch of CSS files through ajax and call an animation when the stylesheet has finished loading, otherwise the animation will fail.</p>
  
  <p>What I have done so and used to work pretty well until I came accross doing this cross-domain is this:</p>
  
  <pre><code>$.get(resource.url, {cache:true}, function(css) {
      //Now that the stylesheet is in the browser cache, it will load instantly:  
  
      $("head").append($("&lt;link&gt;",{
         rel: "stylesheet",
         type: "text/css",
         href: resource.url
      }));
  
  }).then(function(){
     //Animation here that depends on the loaded css
  });
  </code></pre>
  
  <p>This works fine as long as <code>resource.url</code> is on the same domain. Once I try to load the css from another domain <code>$.get</code> will fail like this:</p>
  
  <pre><code>XMLHttpRequest cannot load https://example.com/style.css. Origin https://example.com is not allowed by Access-Control-Allow-Origin.
  </code></pre>
  
  <p>So I have tried to add CORS into the header through <code>.htaccess</code>:</p>
  
  <pre><code>&lt;IfModule mod_headers.c&gt;
      #cross domain access is okay for resources (#107)
      &lt;FilesMatch "\.(css|js)$"&gt; 
          Header add Access-Control-Allow-Origin "*"
      &lt;/FilesMatch&gt;
  &lt;/IfModule&gt;
  </code></pre>
  
  <p>This adds the CORS header to all CSS and JS resources.</p>
  
  <p>For some reason <a href="http://www.w3.org/TR/cors/" rel="noreferrer">CORS</a> doesn't seem to have an effect on either chrome or firefox (newest versions).</p>
  
  <p>I also came to notice that same domain policy is not enforced when doing <code>$.getScript</code> for js files, but it is for <code>$.get</code>:</p>
  
  <pre><code>$.get("https://example.com/script.js", {cache: false}, $.noop, "script"); 
  
  //works regardless of CORS
  </code></pre>
  
  <p>but:</p>
  
  <pre><code>$.get("https://example.com/script.js", {cache: false}, $.noop); 
  
  //does not work (cross domain policy violation)
  </code></pre>
  
  <p>So since CORS is not widely supported and doesn't even seem solve the problem for a modern browser, I need something that behaves like <code>$.getScript</code>, but for CSS stylesheets.</p>
  
  <p>It needs to be <strong>asynchronous</strong> and have a callback mechanism.</p>
  
  <p>Any ideas? Thanks in advance...</p>