SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I affect order of load?

    Please take a look at this page: http://www.nationwide.co.uk/banking/default.htm

    Notice that the background image loads first, then everything site on top. I think it's because the background image is specified using CSS:

    BODY {
    background : #ffffff url("/_common_images/page-bits/body-blue-curve.gif") no-repeat;
    }


    And that everything else sits on top, like an acetate layer. My guess is that the browser does that first because it's easy to calculate, whereas it has to think before laying out the rest of the page.

    Does anyone have any suggestion about how I can delay that image so that it all seems to happen at once?

    Please note: placing the image in the BODY tag is not an option. The style sheets must allow for swapping, if desired, so anything on the page like this could potentially present a problem.
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  2. #2
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't believe the order of the content on your site (i.e. what's easiest to load compared to what's the most difficult to load) matters either way to your browser. It doesn't guage whether something's hard to load or not -- it's a computer program -- everything's easy to load for it.

    Keeping that in mind, I don't believe there's a way to supress everything from appearing short of JavaScript or some other "jury-rigging" method. And even doing this is not recommended, at least by myself. It just doesn't really matter to me in what order things load....

    It will all load eventually -- chances are your users do not care either. However, if you are still determined to do this, try searching for some sort of JavaScript or something that may provide you with a way to do what you're wanting to do.

    -Colin
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  3. #3
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it has more to due with the <TABLE> construction rather than the stylesheet. With the <TABLE> the browser has to wait until all of the data is loaded and then calculate its diminutions before it appears on the screen, I think.

    See if you can break it up a bit or get rid of some of those nested tables and such. :-)

    ~~Hope This Helps

  4. #4
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only way I would know to do this would be to use javascript. It would be an ugly and really messed up set of code at that and would be difficult to make backwards compatible. It is possible though.

    It would also be a guess. You could setup a pseudo code to run a timer. Now at this point there are two things you could do. One being really ugly the other maybe being a little cleaner

    1 -
    Figure out which javascript code maipulate the body tag and set a time for say 3 seconds to load it up around the same time everything else loads.

    2 -
    Set a small 1x1 white gif in a layer and make the size of the gif 1024x768 to code the whole screen. Set a time for 3 seconds and use the code like so

    document.getElementById('hiddenLayer').style.visibility='hidden'

    This would unhide the background around the same time as the rest appears.

    3 - thought of something else
    Why not use it in the foreground, or at least setup some columns and rows in your table and use it as a background in the table. This will cause it to load at the same time as the table instead of beforehand.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm
    but is spending the time to do this worthwhile? seems like a bit of effort there for something small.
    signature

  6. #6
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mmm, well I appreciate people taking time to think about how to solve this, but complicated workarounds fly in the face of the original aims of these pages - to simplify things by using CSS, removing the presentation from the HTML

    Unfortunately it's not possible to remove TABLE tags for layout purposes, because of the range of browsers that we have to support. Pure CSS/DIV layouts just don't do what we need.

    I also know that with table layouts, the browser has to wait until the whole table has downloaded before rendering. If the table is a fixed width, it makes the job easier, but again, we have a liquid design, and we have to use tables to achieve that.

    One day, though, we'll be able to ditch support for Netscape 4 and that will make Jack a very happy boy ;-)
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  7. #7
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about placing the pic in the table instead of as a background on the body. That way it will load at the same time as the rest of the table.

    It is a workaround but only a small one.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  8. #8
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Maelstrom
    What about placing the pic in the table instead of as a background on the body. That way it will load at the same time as the rest of the table.

    It is a workaround but only a small one.
    Problem is that it means the image is in the HTML - in every page. If we want to change the style of the page, either as part of a site-wide change or perhaps as part of a style-switcher feature on every page, then we cannot do it by CSS alone. One of the aims was to remove markup on the page and use CSS more heavily - to do what it's meant to do, that is remove presentation from the document structure.

    Nothing in life is ever easy, eh?
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  9. #9
    SitePoint Enthusiast thenovice's Avatar
    Join Date
    Mar 2001
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately it's not possible to remove TABLE tags for layout purposes, because of the range of browsers that we have to support. Pure CSS/DIV layouts just don't do what we need.
    lloydi...pls take a look at this page <http://www.alistapart.com/>. This site is a classifiable wonder.
    Last edited by thenovice; Mar 27, 2002 at 08:41.
    :: There are some who live in a dream world, and there are some who face reality; and then there are those who turn one into the other ::

  10. #10
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Know all about that site - in fact, I would have posted to the ALA forum for sure, but for the fact that it was shut down some time ago :-(

    Unfortunately, this page doesn't help me with the question - there is no background image being used, so it's not doing what mine is doing.

    The problem is one of perception - although pages are smaller in file size, and more elements are cached than the previous version of these pages, there is a time difference between the first image appearing and the rest of the page - and it's only because the background image is tied to the BODY absolutely, so it CAN do it straight away with no problem ...

    I think this one is a non-starter
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  11. #11
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about adding an extra css file to be loaded at the end of the body tags?

    I know it sounds stupid, but it might be a solution.

  12. #12
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that is an option, but I wanted to avoid that kind of thins also, on the basis of trying to make the code as valid as possible ... but it's worth considering.
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback


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
  •