Topic awaiting preservation: caching & mouseovers and which way is better?

Long ago, Bitdamaged provided this script:

function preLoad(){

	imgpath = new Array();

	imgpath[0] = "1.jpg";

	imgpath[1] = "2.jpg";

	imgpath[2] = "3.jpg";

	imgpath[3] = "4.jpg";

	preloadImages(imgpath);

}



function preloadImages(the_images) {

	an_image = new Array();

	for(i = 0; i < the_images.length; i++){

   	an_image[i] = new Image();

		an_image[i].src = the_images[i];

	}

loaded = 1;

}



function swap_image(name, num) {

	if(loaded){ 

		document[name].src = an_image[num].src;

	}

}

and I call it via: <a href="javascript:void(0);" onmouseover="swap_image('home','1');">blah</a>

but recently, I found:

if (document.images) {

  images1on = new Image();

  images1on.src = "1.gif";



  images2on = new Image();

  images2on.src = "2.gif";



  images3on = new Image();

  images3on.src = "3.gif";



  images4on = new Image();

  images4on.src = "4.gif";



  otherImageDefault = new Image();

  otherImageDefault.src = "other1.gif";



  otherimages1 = new Image();

  otherimages1.src = "other2.gif";



  otherimages2 = new Image();

  otherimages2.src = "other3.gif";



  otherimages3 = new Image();

  otherimages3.src = "other4.gif";

}



function changeImages() {

  if ((document.images)&&(loaded=1)) {

    for (var i=0; i<changeImages.arguments.length; i+=2) {

      document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");

    }

  }

}

and call it via

<a href="javascript:void(0);" onmouseover="changeImages('images1', 'images1on', 'otherImage', 'otherimages1');">blah</a>

the advantage is that you can swap multiple images without having to call the function multiple times. My question, since I'm not very good at Javascript (especially caching things), is does the second cache just as well, or is there a combination of the two that would work?

They both cache images the resaon I like to wrap my preloading script in a function is that when I'm loading images into cache I like to do it after the page loads, I think it's a better user experience. The other method is works as well but it loads all the images into cache before the page even starts to render the rest of the page.

Just a note, that code of mine is a little wierd you shouldn't need 2 functions, just the array and call the preload function with the array as an argument.

You could modify this:

function changeImages() {  

     if ((document.images)&&(loaded=1)) {    

          for (var i=0; i<changeImages.arguments.length; i+=2) {      

               document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");    

          

          }  

     }

}

To this

function changeImages() {  

     if ((document.images)&&(loaded=1)) {    

          for (var i=0; i<changeImages.arguments.length; i+=2) {      

               document[changeImages.arguments[i]].src =  an_image[i+1].src  

          }  

     }

}

And use it as a replace for my swap_images function, calling it like so

changeImages(name, num, name, num)

And it will swap multiple images. (this way also gets rid of using an eval which sucks)



.:[ Never resist a perfect moment ]:.

Okay, I'm a bit stuck....

If I use this:

loaded = 0;

// window.onerror=null;



function preLoad(){

	imgpath = new Array();

	imgpath[0] = "1.jpg";

	imgpath[1] = "2.jpg";

	imgpath[2] = "3.jpg";

	imgpath[3] = "4.jpg";

	preloadImages(imgpath);

}



function preloadImages(the_images) {

	an_image = new Array();

	for(i = 0; i < the_images.length; i++){

   	an_image[i] = new Image();

		an_image[i].src = the_images[i];

	}

loaded = 1;

}



function changeImages() {

	if ((document.images)&&(loaded=1)) {

		for (var i=0; i<changeImages.arguments.length; i+=2) {

			document[changeImages.arguments[i]].src =  an_image[i+1].src            

		}       

	}

}

and call it via
<a href="javascript:void(0);" onmouseover="changeImages('home','1','pane','3');" onmouseout="changeImages('home','0','pane','2');alert('done');">Do it</a>

the onmouseover works fine. The alert() on the onmouseout works fine, but the changeImages() call onmouseout doesn't fire. What am I missing here?

I might add that I don't get an error. Just nothing happens. Any help would be greatly appreciated.

thanks!

Pugzly-

You need to change the line inside the for loop to look like this:

document[changeImages.arguments[i]].src =  an_image[[b]changeImages.arguments[i+1][/b]].src

bitdamaged-

Thanks a lot for this tip:

quote:

---

I like to wrap my preloading script in a function is that when I'm loading images into cache I like to do it after the page loads, I think it's a better user experience. The other method is works as well but it loads all the images into cache before the page even starts to render the rest of the page.

---

- that was exactly what the GN's preloading script needed to make the pages appear *a lot* faster


kuckus

Ah. That makes more sense. Now it works!

Thanks!