SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery $(document).ready too slow in IE?

    Hi All

    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:

    Code:
    <head>
    <!--loading stylesheet-->
    <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>
    <script type="text/javascript" src="DITTO - LINK TO LATEST UI CORE PLUGIN JS"></script>
    <script type="text/javascript" src="LINK TO UI TABS JS"></script>
    
    <!-- the script -->
    <script>
      $(document).ready(function(){
        $("#example > ul").tabs();
      });
      </script>
    </head>
    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

    Gavin

  2. #2
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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() !

    sitepoint.com/forums/showthread.php?t=543911&highlight=jquery+ready

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •