The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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.

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 withoutsense enough to be lazy.

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. :-)

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.

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 ;-)

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.

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 ...