ansaurus

Question

How can I tell if a CSS file has loaded that I've included via JavaScript?

Answer 1

A:

I don't know about triggering an event, but can you make an get request for the CSS file and then just update the <head> with a new <style> tag, placing the content of the file inside the <style> tag?

$(document).ready(function() { 
   $.get("http://example.com/style.css", function(data) {
      $('head').append("<style>" + data + "</style>");
   });
   ... /* your code */ ...
});

beggs 2009-07-21 01:36:29

This works, except the image paths are pointing to different areas once they are included like this.

alex 2009-07-21 02:02:15

That may be because the relative paths used in the CSS file are not valid from the HTML file. You can use absolute paths or update the relative paths as though the css file was in the same directory as the HTML page.

beggs 2009-07-21 03:17:22

Answer 2

A:

Unless there is some kind of "onload" event for the CSS (and there should be, as firebug will show such a thing), I would use the following procedure:
1. Put a hidden DOM element with color X.
2. in the uploaded CSS this color will be changed to y
3. Once you initiate the upload (in your JS) you create a listner that will rise what ever function you want when the color changes to y.

By listner I mean use setInterval.

Itay Moav 2009-07-21 01:41:48

ansaurus

tags:

views:

answers:

How can I tell if a CSS file has loaded that I've included via JavaScript?

related questions