Is there anything in the code slowing things down?

Forum Moderators: not2easy

Message Too Old, No Replies

Is there anything in the code slowing things down?

my background sort of pops in late

annej

11:25 pm on Nov 21, 2007 (gmt 0)

background-image: url(http://www.mydomain.com/newformat/bluespale.jpg);

I've made the jpg as small and low density as I can.

SuzyUK

11:58 pm on Nov 21, 2007 (gmt 0)

I would say no is the answer to the post title but it is funny you should mention this, I have seen this "background popping in late" thing quite a lot during normal day-to day surfing, on both CSS and Table designed sites - I have never actually sat down to figure out why..

my thoughts would be that browsers have somehow decided (been configured) to treat backgrounds as unimportant because they're aesthetic, which of course they are because content is king..

if you have site you can try something (non critical) on.. have you tried adding a background color which is very close the the color required along with your image?

e.g.

background: #ff0 url(yellow.gif)

if you do try it, does it help or is it the same?

annej

1:37 pm on Nov 22, 2007 (gmt 0)

I have made the background color as close as possible to the background image color. I do think it helps to make it seem less like a pop when the image comes on.

I will keep experimenting with the size of the background JPG. I notice some of the CSS Zen Garden examples have this pop problem too. But other examples there come up quite smoothly. I wonder what their secret is.

HarryM

2:18 pm on Nov 22, 2007 (gmt 0)

Browsers are usually set to request only a certain number of items at any one time. The image may be delayed because the browser is downloading js files and other images. Also the CSS stylesheet has to be downloaded before any images it references.

The answer might be to link specifically to the image in the header before any other links, although I haven't tried this.

vincevincevince

2:28 pm on Nov 22, 2007 (gmt 0)

HarryM has hit the nail on the head. Put the background CSS class into the <head> section directly, and consider placing it on a subdomain rather than the main domain.

You can also use layering to speed things up:

<style>
.background1 .background2 .background3 {background-repeat:no-repeat;}
.background1 {background-image:url('image1.jpg');background-position:0 0;}
.background3 {background-image:url('image2.jpg');background-position:0 300px;}
.background3 {background-image:url('image3.jpg');background-position:0 600px;}
</style><div class="background1">
<div class="background2">
<div class="background3">
...content...
</div>
</div>
</div>

annej

4:05 pm on Nov 22, 2007 (gmt 0)

Wow, putting it in the body on the actual page solves the problem beautifully. Since I'm remodeling my site I can add this as I go giving the background image a generic name and I could still easily change the image site wide later.