Welcome to WebmasterWorld Guest from 54.147.134.218

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)

Preferred Member

10+ Year Member

joined:Mar 23, 2001
posts:402
votes: 0


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)

New User

10+ Year Member

joined:Apr 4, 2004
posts:9
votes: 0


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)

Preferred Member

10+ Year Member

joined:Dec 4, 2002
posts:385
votes: 0


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)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12166
votes: 51


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)

Preferred Member

10+ Year Member

joined:Mar 23, 2001
posts:402
votes: 0


thanks fellas.

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