Firstly, apologies if the wording of this post sin't too clear - it's 1am in the UK and I've been trying to solve this problem since lunchtime so my brain's in a bit of a mess.
I'm using jQuery along with th UI plugin to create some tabs. I've got 4 'fragments' (i.e. 4 tabs).
In FF & Opera everything works 100% fine.
However, in IE (6 and 7) there seems to be a delay between the page content loading, and the script being run. When viewing the page, there is a (very short) 'flicker' or time delay - some of the content from other tabs is clearly visible for a fraction of a second before being hidden. Which suggests there's a time delay between the page loading and the script being run - and hence the content is momentarily visible before the script and CSS kick in to arrange everything into tabs.
I set up a test page and found that if there is minimal content on the page then the problem doesn't occur - but as soon as some images are put into the page then the flicker is visible. Again this suggests that the bigger page means there's a bigger delay between the content being displayed and the script kicking in?
I've spent hours on Google trying to solve this, and I've found quite a few posts about jQuery's $(document).ready function being a bit too slow - although nothing I've read has offered a way of solving the problem, and most of it refers to older versions of jQuery, saying that the problem is 'due to be fixed in version 1.2'. I'm using the latest version (1.2.6 I think).
I would link to the test page but my client's quite sensitive about everything being private - will speak to him tomorrow to see if he's happy with me posting a small test page. In the meantime, here is the code I'm using:
<link rel="stylesheet" href="css/flora.css" type="text/css" media="screen" title="Flora (Default)">
<!--loading libraries etc -->
<script src="SITEPOINT WONT LET ME PUBLISH LINKS YET BUT THIS JUST LEADS TO THE LATEST JQUERY LIBRARY"></script>
<!-- the script -->
$("#example > ul").tabs();
As you can see, I've based the test page around the files used in the jQuery documentation and linked directly to their code (only temporary whilst I try resolve this problem, obvoiusly)
ANY suggestions, thuoghts, advice, ANYTHING would be absolutely great - it seems like this has been a problem for a few people before but I've not yet found out how to fix it - I'm going mad!
Thanks in advance
I shuold've mentioned - I also did a quick search on the Sitepoint forums but found suprisingly little.
The thread below seems to describe the exact same problem - but then solves it by using jQuery's $(document).ready(function() !
A much faster way to run the script is to place it at the end of the body, just before the </body>.
The only faster ways after that are to either set a timeout event that watches for the element to appear, or to place the script directly inline immediately after the element you want to affect.
Placing the script at the end of the body is the advised technique to use for speeding up your web page. http://developer.yahoo.com/performance/rules.html