Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Execute jQuery code after all CSS rules have been applied

$(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.

like image 725
takeshin Avatar asked Dec 14 '10 16:12

takeshin


People also ask

Can I use jQuery in CSS file?

The jQuery css() method is used to get the computed value of a CSS property or set one or more CSS properties for the selected elements. This method provides a quick way to apply the styles directly to the HTML elements (i.e. inline styles) that haven't been or can't easily be defined in a stylesheet.

How do I run a function when a page is loaded in jQuery?

Method 2: Using the ready() method: The ready() method in jQuery is used to execute code whenever the DOM becomes safe to be manipulated. It accepts a handler that can be passed with the function required to be executed. It will now invoke the function after the page has completed loading.

How is jQuery executed?

The jQuery starts its code execution from the $(document). ready() function which is executed whenever the whole HTML DOM is loaded and is totally rendered by the browser, so that the event handlers work correctly without any errors. This $(document).

What is the use of CSS () method in jQuery?

jQuery css() Method The css() method sets or returns one or more style properties for the selected elements. When used to return properties: This method returns the specified CSS property value of the FIRST matched element.


2 Answers

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

like image 189
Emmett Avatar answered Nov 08 '22 09:11

Emmett


$(window).load(function() {

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

 alert("window is loaded");

});
like image 27
kobe Avatar answered Nov 08 '22 09:11

kobe