Execute jQuery code after all CSS rules have been applied

Question

$(document).ready() executes the code when all HTML elements have been loaded.

How to execute jQuery code after all of the CSS rules have been applied?

I have few stylesheets linked to the page and it takes some time to load the page. Element layout changes during the time of the loading.

For usability purposes I need to correct the element layout after all of them have target sizes. Otherwise I get wrong sizes of those elements.

Now I do it on focus or after some timeout, but need this after the page loads.

$(document).ready() This line means the jQuery should only start executing once your entire page is loaded. There may be an issue with the CSS. — Matt Asbury, Dec 14 '10 at 16:22
window.load should do , it will till all the images loads also — kobe, Dec 14 '10 at 16:23

score 11 · Accepted Answer · answered Dec 14 '10 at 16:21

11

$(window).load() fires after the whole page (images, CSS, etc.) has loaded.

answered Dec 14 '10 at 16:21

Emmett

14,035
12
56
81

Thanks, I was playing with `$(document).load()`, but I just needed `$(window).load()` – takeshin Dec 14 '10 at 16:35
@Emmett How would I get this to work if I am dynamically injecting CSS? thanks – Kragalon Apr 18 '16 at 06:29

score 2 · Answer 2 · answered Dec 14 '10 at 16:25

2

$(window).load(function() {

 // executes when complete page is fully loaded, including all frames, objects and images

 alert("window is loaded");

});

answered Dec 14 '10 at 16:25

kobe

15,671
15
64
91

Execute jQuery code after all CSS rules have been applied

2 Answers2

Linked