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

Question

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.

What I have done so and used to work pretty well until I came accross doing this cross-domain is this:

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

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

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

This works fine as long as resource.url is on the same domain. Once I try to load the css from another domain $.get will fail like this:

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

So I have tried to add CORS into the header through .htaccess:

<IfModule mod_headers.c>
    #cross domain access is okay for resources (#107)
    <FilesMatch "\.(css|js)$"> 
        Header add Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

This adds the CORS header to all CSS and JS resources.

For some reason CORS doesn't seem to have an effect on either chrome or firefox (newest versions).

I also came to notice that same domain policy is not enforced when doing $.getScript for js files, but it is for $.get:

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

//works regardless of CORS

but:

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

//does not work (cross domain policy violation)

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 $.getScript, but for CSS stylesheets.

It needs to be asynchronous and have a callback mechanism.

Any ideas? Thanks in advance...

To clarify: your page on foo.com is performing a fetch for a CSS resource on some other domain bar.com. You have added the CORS headers to the pages on bar.com, correct? — apsillers
– apsillers, Commented Jul 12, 2012 at 3:24
@apsillers i've added the headers to the css resources. Was it supposed to be on the html pages? — d_inevitable
– d_inevitable, Commented Jul 12, 2012 at 3:26
No, I just wanted to make sure that you weren't mistakenly setting the CORS headers on the page/domain that is performing the fetch. You need to set CORS headers for the cross-domain resource that is being fetched, meaning that you must control that cross-domain resource. CORS is a way of saying, "hey, everyone, it's okay to access this resource in a cross-domain way," not a way of saying "okay, page on my domain, go ahead an access whatever domains you want". You didn't make it clear which you were trying to do, so I wanted to clarify that. — apsillers
– apsillers, Commented Jul 12, 2012 at 3:30
@apsillers, good that's what I thought and that how I've implemented it. The latter wouldn't make sense at all... — d_inevitable
– d_inevitable, Commented Jul 12, 2012 at 3:33

apsillers · Accepted Answer · 2012-07-14 23:49:37Z

9

$.get uses Ajax, which must obey the Same-Origin Policy.

$.getScript normally uses Ajax, but it also has a fallback option for cross-domain use only. Scripts imported via <script> tag are not subject to Same-Origin rules, so jQuery just adds a <script> tag to the page and sets its src attribute to the requested script URL.

The same exemption is made for CSS resources loaded in through <link> tags. In a perfect world, you should be able to 1) make a new <link> element, 2) set its href attribute to the right URL and 3) listen for a load event on that element. I've added a callback to this solution from the jQuery forums:

// note: non-compatible example code, see below for better code
jQuery.getCSS = function( url, media, callback ) {
    jQuery( document.createElement('link') ).attr({
        href: url,
        media: media || 'screen',
        type: 'text/css',
        rel: 'stylesheet'
    }).appendTo('head')
    .on("load", callback);
};

One small problem here: it doesn't work cross-browser. <link> tags do not fire load events in all browsers -- see the jQuery bug report for the $.getCSS function that could have been.

So, the general-case workaround is a bit insane: add the CSS URL as the source of a new <img> tag and listen for its onerror handler:

// correct code!
jQuery.getCSS = function( url, media, callback ) {
    jQuery( document.createElement('link') ).attr({
        href: url,
        media: media || 'screen',
        type: 'text/css',
        rel: 'stylesheet'
    }).appendTo('head');

    jQuery( document.createElement('img') ).attr('src', url)
    .on("error", callback);
};

You could also add a bit of optimization and listen for load event on the <link> (for browsers that support it) and an error event on the <img> (for those that don't), and put some logic in place to ensure the callback is only ever called once, in case both events occur.

As for making $.getCSS return a deferred object, that's a bit out of my area of expertise, but there's no theoretical reason why it couldn't be done.

edited Jul 14, 2012 at 23:49

answered Jul 12, 2012 at 3:57

apsillers

117k18 gold badges248 silver badges249 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

d_inevitable Over a year ago

hey thanks a lot, this should work. Returning a promise object shouldn't be a problem with this. But, it hits the server twice, doesn't it?

apsillers Over a year ago

Yes, it does, but that's price we must pay for not having load events on our <link> elements, sadly. However, if your browser/server is smart about caching, it should only download the content of the CSS file once; the second request should return a 304 Not Modified message.

apsillers Over a year ago

Another solution that is not generalizable (and requires CSS3) is to include an animation in your CSS file that applies to a hidden element in your page. Listen for the animationstart event on that hidden element, and you'll know that the CSS file has loaded. Again, this solution requires planned cooperation between the stylesheet and the page itself, it's not a good general solution to pull in any CSS into any page.

d_inevitable Over a year ago

+1 definitely worth an up-vote for now. I will leave this open for a while, to see if there are other ideas/objections.

d_inevitable Over a year ago

Okay it works in ff and is cached properly according to firebug's net panel. getfirebug.com/wiki/index.php/Net_Panel

|

relic · Accepted Answer · 2017-10-27 19:02:55Z

Put together my own implementation of apsillers' answer using a deferred rather than creating a jQuery plugin.

fetchStyleSheet(url, media = 'screen') {
    let $dfd = $.Deferred(),
        finish = () => $dfd.resolve(),
        $link = $(document.createElement('link'))
            .attr({
                media,
                type: 'text/css',
                rel: 'stylesheet'
            })
            .on('load', 'error', finish)
            .appendTo('head'),
        $img = $(document.createElement('img'))
            .on('error', finish); // Support browsers that don't fire events on link elements

    $link[0].href = $img[0].src = url;
    return $dfd.promise();
}

fetchStyleSheet('/url/to/my/stylesheet.css').done(() => {
    // Stuff after the sheet has loaded
});

This topic is several years old, and I dunno if the backup event on the img is still necessary, but it seemed fairly trivial to implement.

For my specific use-case, I don't actually care if the sheet failed to load so both cases are resolved. If you wanted to handle the cases separately, you could pass an argument to the finish handler to resolve/reject appropriately.

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related