CODEWITHSUNDEEP
jquery
user1403568
user1403568

Reputation: 493

display DOM when it is ready

Is there a simple method to hide the bigger part of website, display loader.gif and nicely show the content with jquery until whole DOM is ready ? How can I code it ? Ofc I do not want use AJAX, just jquery.

Upvotes: 2

Views: 168

Answers (2)

Alexander Wigmore
Alexander Wigmore

Reputation: 3186

You can do it by using jQuery document.ready, which will only apply its functions/actions once the whole DOM is loaded.

You can do this by setting the body to be visibility:hidden, and then add a class with the document.ready function, which changes this to visibility:visible.

jsFiddle - have a look how it works.

(Try changing the "show" to any other word if you want to test that it's working.)

I personally wouldn't suggest this though, on slow connections the website may just appear broken, or potentially flick on/off as the css is loaded, and then jQuery.

As mentioned in the comments if you need content loaded in a cleaner fashion AJAX is usually the way to go.

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

use visibility:hidden / visible on the part you don't want to show until dom is ready. and once The DOM is ready ( $('document').ready();) , make your content visible with animation or anyway you like.

Upvotes: 3

Related Questions