Welcome to WebmasterWorld Guest from 23.23.53.177

Forum Moderators: incrediBILL

Message Too Old, No Replies

background images in style sheet

they are last to render - any fix?

   
10:38 am on Apr 5, 2004 (gmt 0)

10+ Year Member



Hi

Our website uses background images that are referenced in an external style sheet. The problem we have is that those images are the last to be downloaded and so they render on the page last. All the other images get downloaded first and this is finally followed by the background images.

Does anybody know of a way to force those images to download sooner.

Whatever the solution is, it must still allow the page to render gradually, rather that seeing a white screen until all the page is downloaded.

Any help would be much appreciated.

7:21 pm on Apr 5, 2004 (gmt 0)

10+ Year Member



Complete guess, but perhaps stick the image somewhere near the top of the page, resized to 1x1 above all the other images.

That should ensure it will load first, and then perhaps pop into place as soon as the stylesheet loads - rather than the two-step: stylesheet->image thats holding it up at the moment.

If display:none doesn't affect loading time, you can add that direct <img src="/file.gif" style="display:none" width=1 height=1>

Sorted?

9:23 pm on Apr 5, 2004 (gmt 0)

10+ Year Member



External style sheets do seem to get loaded late in the process.

What if your style data that involved images was included in an SSI for the head of each page, in a style element? (<style type="text/css" media="....)

10:09 pm on Apr 5, 2004 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hmmm, I've never experienced any problems with background images loading prior to the rest of the page. You would think that since the CSS is loaded before the
<body>
that all those images referenced in the CSS file would also load before any content after the
<body>
.

Does anybody know of a way to force those images to download sooner.

Maybe try using a javascript preload?

Complete guess, but perhaps stick the image somewhere near the top of the page, resized to 1x1 above all the other images.

Be careful with 1x1 images as a background. They cause some rendering issues, especially when working on those pages in a WYSIWYG interface. The pages scroll vertically very slowly due to the 1x1 gif being rendered. I usually recommend no smaller than 36x36 or 72x72.

11:19 pm on Apr 5, 2004 (gmt 0)

10+ Year Member



thanks fellas.

mafitzpatrick - i like your thinking - I'm going to try that as soon as I get into the office tomorrow ;-)