Jquery Determine when Style appended to head has finished loading

Question

I am adding a style sheet to the head of the HTML page via the Jquery appendTo API. Once appended it appears the browser goes off and downloads the style sheet and referenced images and then applies the changes to the page.

How can I detect after this page has been updated? I.E. once its done downloading and done applying the CSS Style sheet that was added via appentTo?

Thanks!

dup - http://stackoverflow.com/questions/2571164/jquery-event-that-triggers-after-css-is-loaded — mrtsherman, Dec 21 '11 at 04:46

score 0 · Answer 1 · answered Dec 21 '11 at 04:47

0

don't know if this works at all, but try to run document ready inside a function after the append function.

answered Dec 21 '11 at 04:47

Spoeken

2,549
2
28
40

score 0 · Accepted Answer · answered Dec 21 '11 at 04:58

Usually browsers trigger image download when they detect that image is used for rendering. So if you have styles with images that are not applied to any elements the images will not be downloaded.

The only event that is possible to generate in this respect is window.onload() - all (fuzzy term) resources initially declared in visible elements are arrived. See: https://developer.mozilla.org/en/DOM/window.onload .

score 0 · Answer 3 · answered Dec 21 '11 at 05:07

0

You can you do it like this:

$("head").append("some.css").bind('onreadystatechange load', function()
{
   alert(1);
});

answered Dec 21 '11 at 05:07

Fenec

1,224
13
21

score 0 · Answer 4 · answered Dec 21 '11 at 05:20

0

You probably also want to consider preloading images and such. Easy and good way of doing it: http://jsfiddle.net/yWntc/12/

answered Dec 21 '11 at 05:20

Spoeken

2,549
2
28
40

Jquery Determine when Style appended to head has finished loading

4 Answers4