Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2002
    Location
    kansas city, mo
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamically loading images

    Hello,

    I have some code that takes an image url (and some info about the image) and creates a viewer in a layer. The code uses the dimensions of the incoming image to size and position the viewer. On the machine I use for developing, I have found that the image often hasn't fully loaded by the time the code asks for its width and a zero is returned, instead. As a result, the viewer is improperly sized and positioned.

    Is there any way I can make the execution wait until the image object has loaded? I've included the main function, an example of the array it works with and a couple of calls. I didn't include all of the supporting functions, so this code won't run. If you need to see it work, let me know and I'll post the whole mess of it. I should state here that I used the Image Thumbnail viewer (c) Dynamic Drive (www.dynamicdrive.com) as my starting point, although I have since modified it considerably.

    Code:
    imgs = new Array(
          "img1","imgtype","artist","copyright holder","copyright yr","img1.jpg",
          "img2","imgtype","artist","copyright holder","copyright yr","img2.jpg");
    
    <a href="javascript: void does_nothing()"
       onClick="return showPic(0, _left, true)"
      <img src="img1_thumbnail.jpg">
    </a>
    <a href="javascript: void does_nothing()"
       onClick="return showPic(1, _left, true)"
      <img src="img2_thumbnail.jpg">
    </a>
    
    
    function showPic(pos, lr, hasNav){
       if (ie || ns6){
          var pgyoffset;
          var horzpos;
          var edgeofpage;
          var vertpos;
          var divstrings;
    		
          //check for out-of-bound values and wrap to front or back of array
          pos = wraparray(pos, imgs.length, 6);
    		
          //set position globals
          setpos(pos);
    		
          //get the main div		
          imgobj = document.getElementById ? document.getElementById("showimage") : document.all.showimage;
    		
          //get the image
          var thisimg = new Image();
          thisimg.src = imgs[posImg];
    		
          //calculate each of these values once
          var ns6winwd = window.innerWidth;
          var iewinwd = ietruebody().clientWidth;
          var iescrollwd = ietruebody().scrollLeft;
          var imgwd = thisimg.width;
    		
          //calculate the position of the layer
          vertpos = ns6 ? pageYOffset+10 : ietruebody().scrollTop+10;
          if (lr == _left){
             horzpos = ns6 ? pageXOffset+(ns6winwd/2)-(imgwd) : iescrollwd+(iewinwd/2)-(imgwd);
             edgeofpage = ns6 ? pageXOffset : iescrollwd; //get the left edge of the window
             if (horzpos < (edgeofpage + 10)){
                horzpos = edgeofpage + 10;
             }  
          }else if (lr == _right){
             horzpos = ns6 ? pageXOffset+(ns6winwd/2) : iescrollwd+(iewinwd/2);
             edgeofpage = ns6 ? ns6winwd : iescrollwd+(iewinwd); //get the right edge of the window
             if ((horzpos + imgwd) > (edgeofpage - 10)){
                horzpos = edgeofpage - imgwd - 10;
             }  
          }//endif
    		
          //set the position and width of the div object
          imgobj.style.left = horzpos+"px";
          imgobj.style.top  = vertpos+"px";
          imgobj.style.width = imgwd;
    		    
          //construct divstrings for each of the sub divs
             //****I left this code out for clarity's sake****
          
          //set the content and turn on the object   
          imgobj.innerHTML = divstrings;
          imgobj.style.visibility = "visible";		
          return false;
       }
       else //if NOT IE 4+ or NS 6+, simply display image in full browser window
          return true;
    }
    //end showPic

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts

    Use onload handler of image

    Try this:
    Code:
    function showPic(pos, lr, hasNav){		
          //get the image
          var thisimg = new Image();
          thisimg.onload = function(){loadPic(pos, lr, hasNav)};
          thisimg.src = imgs[posImg];
    }
    //end showPic
    
    function loadPic(pos, lr, hasNav){
       if (ie || ns6){
          var pgyoffset;
          var horzpos;
          var edgeofpage;
          var vertpos;
          var divstrings;
    		
          //check for out-of-bound values and wrap to front or back of array
          pos = wraparray(pos, imgs.length, 6);
    		
          //set position globals
          setpos(pos);
    	
          //get the main div		
          imgobj = document.getElementById ? document.getElementById("showimage") : document.all.showimage;
    		
          //calculate each of these values once
          var ns6winwd = window.innerWidth;
          var iewinwd = ietruebody().clientWidth;
          var iescrollwd = ietruebody().scrollLeft;
          var imgwd = this.width;
    	
          //calculate the position of the layer
          vertpos = ns6 ? pageYOffset+10 : ietruebody().scrollTop+10;
          if (lr == _left){
             horzpos = ns6 ? pageXOffset+(ns6winwd/2)-(imgwd) : iescrollwd+(iewinwd/2)-(imgwd);
             edgeofpage = ns6 ? pageXOffset : iescrollwd; //get the left edge of the window
             if (horzpos < (edgeofpage + 10)){
                horzpos = edgeofpage + 10;
             }  
          }else if (lr == _right){
             horzpos = ns6 ? pageXOffset+(ns6winwd/2) : iescrollwd+(iewinwd/2);
             edgeofpage = ns6 ? ns6winwd : iescrollwd+(iewinwd); //get the right edge of the window
             if ((horzpos + imgwd) > (edgeofpage - 10)){
                horzpos = edgeofpage - imgwd - 10;
             }  
          }//endif
    		
          //set the position and width of the div object
          imgobj.style.left = horzpos+"px";
          imgobj.style.top  = vertpos+"px";
          imgobj.style.width = imgwd;
    		    
          //construct divstrings for each of the sub divs
             //****I left this code out for clarity's sake****
          
          //set the content and turn on the object   
          imgobj.innerHTML = divstrings;
          imgobj.style.visibility = "visible";		
          return false;
       }
       else //if NOT IE 4+ or NS 6+, simply display image in full browser window
          return true;
    }
    //end loadPic

  • #3
    New Coder
    Join Date
    Oct 2002
    Location
    kansas city, mo
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    glenngv,

    Sorry it took me a while to get back to you. Just wanted to let you know that YOU ROCK!!!

    Thanks a lot!


  •  

    Posting Permissions

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