javascript - How can I load a stylesheet through ajax AND have a callback when the loading is done -

I have to load a bunch of CSS files via AJAX and call the animation when the stylesheet is loaded, otherwise Animation unsuccessful.

I have done this and used to work very well till I came to do this cross-domain:

  $ . Get (resource.url, {Cache: true}, function (CSS) {// Now that the stylesheet browser is in the cache, it will load immediately: $ ("head"). App ($ ("(<> Link & gt; ", {rel: stylesheet", type: "text / css", href: source.url});}). Then (function () {// animation depending on the CSS loaded here Is}};   
 This works fine on the same domain as  resource.url . Once I have to load CSS from any other domain If I try, then  $. Get  will fail like this:  
  XMLHttpRequest can not load https://example.com/style.css.Using access-control-permission of https://example.com-not allowed by the original   
 So I tried to add the CORS to the header via  .htaccess :  
   & gt; ; #cross is good for domain access resources (# 107) & lt; FilesMatch "\. (CSS | JS) $" & gt; Header access-control-permission-origin "*" & lt; / FilesMatch & gt; & Lt; / IfModule & gt;   
 This connects CSS headers to all CSS and JS resources.  
 Chrome or Firefox (latest version) has no effect for any reason.  
 I also learned that  $ for the JS file GetScript is , but it is for  $ :  
  $ Get ("https://example.com/script.js", {cache: incorrect}, $ .noop, "script"); // works without regard to / CORS   
:  
  $ Get ("https://example.com/script.js", {cache: false}, $ .noop); // does not work (cross domain policy violation)   
 So when the CORS is not widely supported and does not solve the problem for a modern browser, Need something that treats like  $ GetScript , but for CSS stylesheets.  
 It should be  asynchronous  and callback mechanism.  
 Any thoughts? Thanks in advance ...   
 
 
  $ Receive  Ajax, which should follow the same-basic policy.  
  $ GetScript uses   normal  Ajax,  but  also has a fallback option for this cross-domain only use  & lt; Script & gt; The scripts imported through the tag are not subject to the same-root rules, so on the jQuery page, a  & lt; Script & gt;  adds tags and its   
  & lt; Link & gt; The only concession given for CSS resources loaded through the  tag is given. In a whole world, you have 1) a new  & lt; Link & gt;  should be enabled to create an element, 2) Set your  href  attribute on the correct URL and 3) Listen to it for a  load  event on that element The callback from the forum has been added:  
  // Note: Look for the non-compatible example code, better code jQuery.getCSS = function (URL, media, callback) {jQuery (document.createElement) ('Link')) .attr ({href: url, media: media || 'screen', type: 'text / css', rel: 'stylesheet'}) .andTown ('head') .on ("load ", Callback); };   
  Here's a small problem:  This does not cross-browser  & lt; Link & gt;  tags do not throw  load  events in all browsers -  $. GetCSS  function that could have been.  
 In this way, the general case: css url is a new  and lt; Img & gt;  Add as the source of the tag and listen to its  panic  handler:  
  // the correct code! JQuery.getCSS = function (url, media, callback) {jQuery (document.createElement ('link')) .attr ({href: url, media: media || 'screen', type: 'text / css', rel : 'Stylesheet'}) attachment ('head'); JQuery (document.createElement ('img')) .attr ('src', url) .on ("error", callback); };   
 You can also add some customization and  load  event to  & lt; Link & gt;  (to support the browser)  and  a  error  at  and  gt;  (for those people who do not), and some arguments are made to ensure that the callback is called only once, if both events occur.  
  $ A deferred object returns to create GetCSS , it is slightly in the area of ​​my expertise, but why can not it be any theoretical reason.