homepage Welcome to WebmasterWorld Guest from 54.197.211.197
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
background images in style sheet
they are last to render - any fix?
stavs

10+ Year Member



 
Msg#: 7633 posted 10:38 am on Apr 5, 2004 (gmt 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.

 

mafitzpatrick

10+ Year Member



 
Msg#: 7633 posted 7:21 pm on Apr 5, 2004 (gmt 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?

zollerwagner

10+ Year Member



 
Msg#: 7633 posted 9:23 pm on Apr 5, 2004 (gmt 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="....)

pageoneresults

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



 
Msg#: 7633 posted 10:09 pm on Apr 5, 2004 (gmt 0)

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.

stavs

10+ Year Member



 
Msg#: 7633 posted 11:19 pm on Apr 5, 2004 (gmt 0)

thanks fellas.

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved