SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    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>
    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?

  2. #2
    CSS & JS/DOM Adept bronze trophy
    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];
      }
    }
    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
    Code:
    <SCRIPT LANGUAGE="JavaScript">
    to
    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.

  3. #3
    SitePoint Zealot
    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.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    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.

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Well, mjunior, we can't help you if you don't show us your code.
    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>

  6. #6
    CSS & JS/DOM Adept bronze trophy
    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;
    to
    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.

  7. #7
    SitePoint Zealot
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •