Preserved Topic: Lots of preload images-Page loads slow

I designed the page listed below for a photographer friend. The 2 strips of film are rollover imagemaps. I used imagemaps because of the diagonal angle of the film made it difficult to slice the film up into its individual frames. Each strip of film has 4 alternate images (8 total) which preload. An additional 8 preload for the textfield in the center of the image. Because all of these images have to preload, the page can sometimes take almost a minute to fully load on a 56k modem.

Is there a way to tweek this code so at least the base images load before the hidden images? The photographer really loves this concept so I'm trying to find a way to make it work.


The URL: http://www.marcsullivanphotography.com/0002.html

Thanks,

Mark Hannon

Well, looking at the page, I'm surprised you chose to use an image map. I think you're falling into a trap that a lot of people fall into; that the boundaries of the clickable area have to be identical to the boudaries of the thing that is being clicked. You can split that one top image up into four images - granted, the edges of the images will not perfectly match the edges of the "frames" of the film. But they'll be so close that people won't notice. See, people will put their mouse right in the center of the picture; they're not going to go exploring around the edges to see what happens if they click, say, between frames. People just don't do that. So, what I'd recommend doing, is splitting it up into four images and using each one separately without the image map. You may have to change the mouse-over images a bit, or maybe increase the spaces between frames a bit in order to make it work out, but I think it will be worth it.

If you chose not to do that, or even if you do, you can change your code to this to make the "base" images load first:

TopMenuBase = new Image(485, 146);

TopMenuBase.src = "Images/TopMenu.gif";

BotMenuBase = new Image(499, 147);

BotMenuBase.src = "Images/BttmMenu.gif";

TopMenuBase.onLoad = BaseImageLoaded();

BotMenuBase.onLoad = BaseImageLoaded();



Products = new Image(485, 146); // note that their sources aren't being set

Food = new Image(485, 146);

... (other images declared here)



num baseImagesRemaining = 2;

function BaseImageLoaded()

{

     baseImagesRemaining -= 1; // another base image has been loaded!

     if (baseImagesRemaining == 0) LoadOtherImages(); // done with base images!

}



function LoadOtherImages()

{

     Products.src = "Images/Products.gif"; // now their sources are being set so they'll start to load

     Food.src = "Images/Food.gif";

     ... (other image sources set here)

}

That's the basic idea behind it. Hope that helps.



[This message has been edited by Slime (edited 05-14-2001).]