background images

Maxxim · February 13th, 2007, 01:48 PM

Hello

when i define a background image for my divs, the users that will see the page will download this bakground images files everytime they will see the page.

This generate an ammount of data transfer and make the page
slower.

It's possible to save this background images in cache file?

I'm running a asp.net application, but if that can be done by javascript please help me

Thanks

socoolbrewster · February 13th, 2007, 02:31 PM

I'd use JavaScript to preload the images by creating a function which you call using onload function in the body tag

Gaz

meow · February 13th, 2007, 02:34 PM

How would that help with a background image? Preloading only works for things like rollovers. It doesn't make a background or a normal inline image load faster.

Maxxim, why isn't the background cached? Images usually are.

--
http://yupapa.com

socoolbrewster · February 13th, 2007, 03:20 PM

Sorry maybe I misunderstood the question. However, a JavaScript function could be used to preload ANY image and others for current or other site wide pages!

For example:

Code:

function preLoad_Images() {


            pic1 = new Image();
            pic1.src = "YOURIMAGE.jpg"; // Whatever image gets loaded into cache
}

<body onload="preLoad_Images();">
...
...

Gaz

meow · February 13th, 2007, 03:28 PM

'onload' fires when the page has loaded. So how can it preload images for the current page?

It's only useful for images that appear as a result of user action AFTER the page has loaded, i.e. rollovers. Preloading images for other pages, sure, that'll work.

--
http://yupapa.com

richard.york · February 13th, 2007, 03:35 PM

Whether or not images are cached should be a server setting. I'm not sure what the settings would be in IIS, but I know these settings exist in Apache.

The user's browser also has cache settings.

The following page isn't loading for me right now, but the settings I'm talking about can be found on this page:

http://dean.edwards.name/my/flicker.html

These settings are used here to fix a bug in IE6 called the flicker bug. It forces images to be cached for 30 days in IE. I think he presents settings for Apache, but I think there is also a link to IIS settings from there as well. If the page isn't loading for you, just try back later, as his server is likely temporarily down.

Beyond tweaking server settings, you can also send specific HTTP headers to control caching, but that would require a more sophisticated server-side script to handle your images, so that HTTP headers could be set with image requests.

HTH!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

Maxxim · February 13th, 2007, 06:51 PM

when i google my problem i had seen some pages with this IE bug. But i think my problem is simple.

meow: I really don't know why background images don't save in cache. If i make a page with this:

Code:

<div style="background-image=image1.jpg;">blabla</div>
<div><img src="image2.jpg" /></div>

Image1 is saved on cache, but not image2!
I don't know why...

If i use javascript function that socoolbrewster gave, I download this image everytime I have a page load or just first time?

If i download everytime I'll have the same problem with transfer data from my hoster right?

Thanks to all

socoolbrewster · February 14th, 2007, 10:09 AM

The JavaScript function I showed you is meant to cach an image, but this does depend on your browser settings

Gaz

socoolbrewster · February 14th, 2007, 10:11 AM

Hi

I realise prob a typing error, but I presume you realise above should be written

<div style="background-image:image1.jpg;">blabla</div>

Gaz

socoolbrewster · February 14th, 2007, 10:13 AM

LOL I meant

<div style="background-image: url(image1.jpg);">blabla</div>

Gaz