newbie - image preloader not working

[anyname]

Does anyone know why my image preloader isn't working?

<SCRIPT LANGUAGE="JavaScript">
  var imagesArray = new Array();
  imagesArray[0] = "url/image_1.jpg";
  imagesArray[1] = "url/image_2.jpg";
  imagesArray[2] = "url/image_1.jpg";

	

  function preloader(){
  	  var preload = new Image();
	  for (i=0; i < imagesArray.length; i++) {
	    preload.src = imagesArray[i];
	  }
  }

  function swapImage(imgIndex) {
    document['imgBig'].src = imagesArray[imgIndex];
  }

</script>

on bodyload I call preloader()

a link swaps the image swapImage(0) for example, but the images don't preload, they still end up loading when you click the swap link.

Any ideas?

[Kravvitz]

1) You need to create an image object for each image you want to preload. Try this:

var preloadedImages = new Array();
function preloader(){
  for(var i=0; i < imagesArray.length; i++) {
    preloadedImages[i] = new Image();
    preloadedImages[i].src = imagesArray[i];
  }
}

2) It's best to avoid using inline event handlers. I suggest you read up on Unobtrusive JavaScript and other JavaScript Best Practices.

3) Change

<SCRIPT LANGUAGE="JavaScript">

to

<script type="text/javascript">

[mjunior]

I'm having a similar problem here and as far as my test goes, the src can't be changed in IE7, although works fine into IE5 or 6.

[Kravvitz]

Well, mjunior, we can't help you if you don't show us your code.

[mjunior]

Well, mjunior, we can't help you if you don't show us your code.

Here it goes:

<script type="text/javascript">

  // width to resize large images to
var maxWidth=100;
  // height to resize large images to
var maxHeight=100;
  // valid file types
var fileTypes=["bmp","gif","png","jpg","jpeg"];
  // the id of the preview image tag
var outImage="previewField";
  // what to display when the image is not valid
var defaultPic="imagens/unavailable.jpg";

function preview(what){
  var source=what.value;
  var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
  for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
  globalPic=new Image();
  if (i<fileTypes.length) globalPic.src=source;
  else {
    globalPic.src=defaultPic;
    alert("This is not a valid extension for images. Pick one from the supported extensions as :\n\n"+fileTypes.join(", "));
  }
  setTimeout("applyChanges()",200);
}
var globalPic;
function applyChanges(){
  var field=document.getElementById(outImage);
  var x=parseInt(globalPic.width);
  var y=parseInt(globalPic.height);
  if (x>maxWidth) {
    y*=maxWidth/x;
    x=maxWidth;
  }
  if (y>maxHeight) {
    x*=maxHeight/y;
    y=maxHeight;
  }
  field.style.display=(x<1 || y<1)?"none":"";
  field.src=globalPic.src;
  field.width=x;
  field.height=y;
}
</script>

<input type="file" name="File1" id="picField" onChange="preview(this)" size="10" >


<div align="center" style="line-height: 1.9em;">  	    
     <img src="imagens/unavailable.jpg" alt="Preview from image" name="previewField" width="100" height="99" border="0" id="previewField"></div>

[Kravvitz]

I think it's a security feature. The image on the local computer would be from a different zone than the website this page would presumably be on.

However, you can try changing

globalPic.src=source;

to

globalPic.src='file:///'+source;

[mjunior]

Same result.

I also figured it might be some security issue since I start facing this only when the users upgrated their browser to version 7.