SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Apr 30, 2007, 15:31 #1
- Join Date
- Apr 2007
- Posts
- 2
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
newbie - image preloader not working
Does anyone know why my image preloader isn't working?
Code:<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>
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?
-
Apr 30, 2007, 17:19 #2
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
1) You need to create an image object for each image you want to preload. Try this:
Code:var preloadedImages = new Array(); function preloader(){ for(var i=0; i < imagesArray.length; i++) { preloadedImages[i] = new Image(); preloadedImages[i].src = imagesArray[i]; } }
3) Change
Code:<SCRIPT LANGUAGE="JavaScript">
Code:<script type="text/javascript">
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
May 1, 2007, 11:45 #3
- Join Date
- Mar 2005
- Posts
- 166
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
May 1, 2007, 11:48 #4
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well, mjunior, we can't help you if you don't show us your code.
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
May 1, 2007, 12:09 #5
- Join Date
- Mar 2005
- Posts
- 166
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Here it goes:
HTML Code:<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>
-
May 1, 2007, 12:50 #6
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
Code:globalPic.src=source;
Code:globalPic.src='file:///'+source;
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
May 1, 2007, 17:36 #7
- Join Date
- Mar 2005
- Posts
- 166
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Bookmarks