Run javascript after CSS is dynamically load and rendered

Question

I would like to load css files dynamically, and run a js script after the css is rendered on the document. I want to use an element's new width and height which is set by the loaded css.. So it's important to run the js after render. Is it possible? I'm using jQuery.

Answer 1

Sounds like a job for SidJS:

SidJS is a lightweight JavaScript library that allows one to include JavaScript scripts and CSS stylesheets on demand. It supports callbacks tied to the loading process to guarantee that the resources you're loading are available when you need them.

In other words, you request a style sheet and provide a callback function. The callback function is executed when the style sheet has been loaded. Example:

Sid.css("my-sheet.css", function() {
    // Perform your width/height logic here.
});

I'm not completely sure if the document will have had time to redraw by the time the callback is executed, but you should try it out. Worst case scenario, you simply delay your logic by 100ms or so using setTimeout.