jQuery Tabs Hide Until Loaded

Question

I am using jQuery UI Tabs to control the presentation of content on a portfolio page I am implementing. The page consists of many large images and the tabs take about a second or two to fully load. I want to know if their is a way to hide/mask all content until the tabs are loaded. Optimally I would like to have a loading graphic appear until the tabs are loaded.

Please advise.

Thanks, Brad

Answer 1

$(document).ready is for when the DOM is fully loaded by not the content. What you will want to do is have the tabs div set to display:none in the css until the images have fully loaded. In oldschool javascript, we used to use the .onload() function. You will want to use this and when it fires, you the set the tab's div to display:block (or use jQuery's .show()). For the wait graphic, use a spinner in a div that's css is display: block. Then in the onload() function, do the jquery .hide().