SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Washington DC
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird Page Rendering Before Page is Ready with jQuery

    My web pages tend to render without styling for a flash to a few seconds before the document is ready. I am afraid that I cannot show the pages because the staging site is in a password-protected directory. However, I am sure that someone reading this has experienced this phenomenon and has a suggestion of how to fix it.

    I suspect it has something to do with the "document.ready" function in jQuery. Amirite? Suggestions?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You could try an experiment of placing the jQuery links at the bottom of the page (just before </html>) and see if that makes any difference.

  3. #3
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This sounds more like a function of your style sheets css not being loaded....? Correct me if I'm wrong but the JQuery library shouldn't really have much to do with the style of your site should it?

  4. #4
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what exactly is in your jQuery code? you mentioned the DOM-ready function, are you using it? if so, what is happening on DOM-ready?

    i can appreciate not being able to post a demo page, but we'll likely need *some* code (even a simplified example) to be able to help.

    @rustybuddy

    Correct me if I'm wrong but the JQuery library shouldn't really have much to do with the style of your site should it?
    hard to say without seeing any of TMacFarlane's code, but there are several ways that using jQuery could impact the style... obviously it shouldn't change the styles inherently (i.e. just loading jQuery shouldn't make any DOM changes), but adding/removing/changing styles is one of jQuery's more useful features.

    my guess is one of a few scenarios:

    - you have some jQuery code that loads/removes/changes stylesheets dynamically

    - you have some jQuery code that adds/removes/changes IDs or class attributes on some elements, which impacts CSS specificity, and happens on DOM-ready

    - you are seeing the well-documented FOUC bug in IE/Safari

    chances are the issue is easy to fix, but without any code were all sorta shooting in the dark, ya know?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Washington DC
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the generic code used pretty much throughout the site:

    Code:
    $(document).ready(function(){
    	$('#awd').addClass('here');
    });
    This is used to give a background color to a
    Code:
    <li>
    element in the navigation bar (so that I can use the same include file throughout that section of the site.)

    It happens throughout the site, however... and if a page has more scripting, this is more noticeable. It happens in all browsers I have tested (i.e., FF, Safari Mac, Opera Mac, Chrome Mac, IE 8 Win & IE6 Win.

    @keeganwatkins: You are 100% right. What I thought was a jQuery bug is actually this FOUC that you mention. I do have a number of stylesheets--for print & mobile.

    Here is how I have dealt with it: I assigned the
    Code:
    <body>
    tag a class of "boo." "Boo" has only one declaration: "visibility:none;" I have added a snippet to the jQUery code in the head:
    Code:
    $('body').removeClass('boo');
    . THis has caused the pages to appear blank until the document is ready. Normally this is only a blink, and even the heavily scripted pages only take a second. Fortunately for me, none of my pages rely on multiple server requests, so I am confident that the user will not be inconvenienced.

    However, I wonder if there is a more elegant, less degraded method for dealing with this... suggestions?

    Quote Originally Posted by keeganwatkins View Post
    what exactly is in your jQuery code? you mentioned the DOM-ready function, are you using it? if so, what is happening on DOM-ready?

    i can appreciate not being able to post a demo page, but we'll likely need *some* code (even a simplified example) to be able to help.

    @rustybuddy



    hard to say without seeing any of TMacFarlane's code, but there are several ways that using jQuery could impact the style... obviously it shouldn't change the styles inherently (i.e. just loading jQuery shouldn't make any DOM changes), but adding/removing/changing styles is one of jQuery's more useful features.

    my guess is one of a few scenarios:

    - you have some jQuery code that loads/removes/changes stylesheets dynamically

    - you have some jQuery code that adds/removes/changes IDs or class attributes on some elements, which impacts CSS specificity, and happens on DOM-ready

    - you are seeing the well-documented FOUC bug in IE/Safari

    chances are the issue is easy to fix, but without any code were all sorta shooting in the dark, ya know?

  6. #6
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @TMacFarlane

    However, I wonder if there is a more elegant, less degraded method for dealing with this... suggestions?
    there is... if you read through the article i posted a link to, the author recommends a blank script tag just before you link elements. so, for example, if your head tag looks like this:

    Code:
    <head>
        <link rel="stylesheet" type="text/css" href="path/to/styles.css"/>
    </head>
    try adding a blank script tag before the styles, i.e:

    Code:
    <head>
        <script type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="path/to/styles.css"/>
    </head>
    of course, i don't really like the idea of adding bloat to pages (i.e. an empty script tag), but it may be more scalable over time as you can add more and more scripts/styles if necessary and you won't notice any additional lag. the current solution (using DOM-ready function to show the body element) requires the page to be ready before revealing the content. as you mentioned, you aren't currently seeing much of a delay, but as your site/app grows in complexity this may change. hope that helps!


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
  •