Images in CSS called at each page

[prabhu_fupu]

Hi,

I am having a website running which i developed ,i have only one CSS file included in my header. I have four different pages and i have different set of images to be loaded for each page.The images are called in the CSS file.I have tested my site speed using external sites and found that ,when i load my homepage all the images included in the CSS file is getting loaded though all the images are not required in the home page.For example if have included image4.gif in my CSS which is required for the fourth page in my site ,That image is getting loaded in my home page .Because of this my site speed is getting affected.

Is this the behavior of the CSS file? if so how can it be changed to load only the images required for the current page.
Any help is appreciated

Thanks in advance:)

[Verdagon]

That's really scary! I would have thought browsers would code that more effectively. Which browser are you using?

I'm thinking one solution is to dynamically load the images with javascript... though that can be a pain.

I also think its possible to dynamically add a <style> block to your page with AJAX... I've seen it done with <script> blocks, so I can't imagine it being too difficult. Google for dynamically loading scripts.

[Andyram2k]

Hi prabhu_fupu,
How do the images differ on each of the pages? Do you have a different template for each page, or is this content images you're loading in with the CSS? If thats that case, take them out of there and have them in the HTML. Hope this helps.

[prabhu_fupu]

Thanks for your reply Verdagon and Andyram2k,

That's really scary! I would have thought browsers would code that more effectively. Which browser are you using?.

It happens this way in all the browsers


Hi prabhu_fupu,
How do the images differ on each of the pages? Do you have a different template for each page, or is this content images you're loading in with the CSS? If thats that case, take them out of there and have them in the HTML. Hope this helps.

The images are called on a mouse hover attribute,on click attribute etc., For the content the background changes with the mouse hover attribute.What can be done in these cases

[Andyram2k]

Hi prabhu_fupu,
Can you either post a link to your site, or provide us with some code please? Thanks.