Javascript code question: pre-loading images.

[Cheetah8799]

So I've been working on this survey site for a customer for some time now, and have one nagging bug. She wants the site setup so that when the user gets to the next survey question, the images for that question pop up right away. Each question has one or two images/photos. She doesn't like the download time. OK, that's a normal issue. I've already optimized the images, but it's not enough. There are Javascript methods to take care of this.

Enter the Image() function.

Here's some info on what I'm doing: link


So I set it up so that as the user goes through the site, the images for the NEXT question are loaded in the background while the user is looking at whatever question they are on. Pretty simple, it's all figured out in PHP and the database. Unfortunately the images are not being pre-loaded into the browser cache. Or if they are, they aren't being used for the next page. Here's a quick sample of the image loading code:

img1 = new Image();
img2 = new Image();
img1.src = "pics/ano27_image1.jpg";
img2.src = "pics/ano27_image2.jpg";


Has anyone here on the forum done something like this before? Any tips? Maybe I'm going about this all wrong. I've seen other Javascript sites set up to download everything, THEN display the page. It still takes time to do that though, and I think the person the site is for still might not like that approach.

thanks for any help.
-Josh

 

[KB]

I have used this technique, but only for image rollovers on the same page. It is up to the browser to decide to cache the image across pages and not all of them do.

 

[Cheetah8799]

Originally posted by: KB
I have used this technique, but only for image rollovers on the same page. It is up to the browser to decide to cache the image across pages and not all of them do.

Ya, in the docs I've read on the net most people use the technique for rollovers. I've tested this in both new IE and Firefox, and it doesn't work right.

 

[Cheetah8799]

For anyone interested, I'm going to take a look at the code included with this article:
http://www.devx.com/webdev/Article/20947/0/page/1


edit: I'm also going to look at doing this with CSS. Similar technique.
http://www.netmechanic.com/news/vol6/css_no18.htm

 

[statik213]

That seems to be the only way of doing this, make sure you preload the images in the page you use it as well.
Here's an easy to use preload function from Dreamweaver:

< script >

// Example:
// simplePreload( '01.gif', '02.gif', ... , "xxx.gif" );
function simplePreload()
{
var args = simplePreload.arguments;
document.imageArray = new Array(args.length);
for(var i=0; i<args.length; i++)
{
document.imageArray = new Image;
document.imageArray.src = args;
}
}


< / script >

 

[itachi]

the purpose of an image cache is to cache the images that you're using in that page.. javascript doesn't have session tracking capabilities.

what u could try to do is preload all the images u plan on using frequently inside a javascript file.. and do <script src="jsfile.js"></script>. that will make the browser cache the script file. then put that statement in subsequent pages for the site. the browser should use the cached version rather than requesting it from the server.

 

[Cheetah8799]

Thanks for the tips guys. It seems that most of the techniques I've found do the same thing deep down, pull the file down in the background buy expect the browser to know to take it out of the local cache instead of re-downloading.

I like your idea itachi, but there are about 80 or 90 images, averaging 40 to 20kb each. That's a pretty big download if I can't have it broken up into a couple images at a time.

I'll play around with it some more, but it's not a major enough issue that I'm going to totally work my butt off for it. If I can't get it to work, I'll just tell the customer that it isn't cost effective. I don't think she will be that upset about it. Worst case I can downgrade the image quality a bit more to get file sizes down.