preload large gallery/slider images in HTML

[rapha]

I was wondering if there's a way though to kind of preload those images to make them appearing faster and smoother. Or maybe there's a way to preload all the other pages and images into the cache so that at least all the following pages after the first appear smooth and fast? Whatever helps to make the pages load faster and smoother.

Any suggestions?

Each image consists of a variety of images, all of them within one wide image (prepared in PSD) and the visitor can shift left and right to call for the respective image to appear in the center. Unfortunately sacrificing on the image quality or make them smaller is not an option here.

I know there are posts here on preloading images ad stuff but I can't find any that work with the image embedded in the HTML code.

Please have merci, I'm a CSS and Javascript novice, so the simpler the more likely I'll understand it. I'm afraid breaking up the images in single instances (make it a row of images instead of one whole image), place them in a floated div and change the respective Javascript code could be too challenging for me, right...? How else could I do that?

Appreciated!

Here's what I have (I guess it would be overkill to post all my HTML, Javascript and CSS here, I'll post some). The large images are placed within the HTML page and called via Javascript.
http://raphaelzwyer.com/testRapha/portfolio_bmw.html

<div class="ShiftGroup">
        <div class="ShiftGroupC">
        <div class="ShiftGroupI"><div id="ShiftGalleryFive"><img src="images/gallery_anzic1.png" width="3348" height="372" alt="imagegallery1" /></div></div>
        <div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"><span class="pointer"><img src="images/arrowleft.png" width="78" height="50" alt="arrowsleft" /></span></div></div>
        <div class="ShiftGroupP" style="margin-left: 341px;"><div id="ShiftRight" class="ShiftGroupD"><span class="pointer"><img src="images/arrowright.png" width="78" height="50" alt="arrowright" /></span></div></div>

and then

gallery = document.getElementById('ShiftGalleryFour').style;

[Old Pedant]

Why do you think using 5 images in a single <div> would be any harder than putting them all into a single image???

But, truthfully, the way you have it now it would require that 3 out of the 5 would have to be loaded as part of the page load, right? How else do you get the effect of the two "faded" images on either side of the center one? So you'd end up loading 60% of the total content at page load time. You won't gain a huge amount by using lazy load for the other 40%.

Or are you anticipating having many more images in the future?

[Old Pedant]

Oh, I see! I hadn't clicked on your PORTFOLIO button before.

Hmmm.. You seem to be doing preloading, already? When I then clicked on MS, the image appeared immediately.

Maybe I don't understand what your real question is, then.

Curiosity: Why do you have several pages instead of just one? I would think it would be easier to control the preloading if you made all the portfolio pages actually one page, using JS to dynamically change the content.

But in any case, since what you have seems to work, what's the real question here?

[rapha]

Hey, Old Pedant,
Thank you for your time and suggestions! Appreciate it!
Maybe I need more basic knowledge in Javascript to qualify for posting here?

"Maybe I don't understand what your real question is, then":

I found a Javascript rule now which I use in the head for preloading. It still just doesn't load smoothly. It's kind of pixelated at first and takes about a second to load. It just doesn't look professional to me. Demanding, I know, but it's my portfolio so I want it to look professional. Am I too picky?

"Why do you think using 5 images in a single <div> would be any harder than putting them all into a single image???"

I don't know how I would reference the single images in CSS or Javascript to the div containing them. In my limited knowledge, f I were to reference them as background images in a CSS class or ID I would have to define a separate class/ID for each background image, no? Plus, as you point it out in your second post, I want to keep the faded images on both sides (they have a transparent white layer on top of them). I even used different linked Javascript files to account for pages that differ in terms of the amount of images in the gallery, I'm sure that's rather unprofessional.
There might be more images coming, yes.

"Why do you have several pages instead of just one":

Same here. If you go to the overview page you'll see that each brand thumb is linked to its own page on which there are different images and different descriptions underneath the images.
I'm not fluent with Javascript and content management systems and I'm a novice in CSS. I couldn't figure out how to do that.
Limited skills...

[vwphillips]

to prevent the initial pixilation start with a low resolution image
and change the image and initialise the script after preload

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#tst {
  position:absolute;left:100px;top:100px;width:665px;height:400px;border:solid red 1px;
}

#tst IMG{
  position:absolute;
}

/*]]>*/
</style></head>

<body>
<div id="tst">
 <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
</div>
<script  type="text/javascript">

var obj=document.getElementById('tst').getElementsByTagName('IMG')[0];
var img=new Image();
img.src='http://raphaelzwyer.com/testRapha/images/gallery_bmw1.png';

function Load(){
 if (img.width<100){
  setTimeout(function(){  Load(); },500);
 }
 else {
  obj.src=img.src;
  obj.style.width=img.width+'px';
  obj.style.height=img.height+'px';
  obj.style.left=-665+'px';
 }
}

Load();

</script>
</body>

</html>