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 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2004
    Location
    Switzerland
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts

    very simple function not functioning.

    Dear All

    I have a java function which doesn't seem to work on the initial load of a webpage:
    Code:
    function widthfind(i){
    window.alert("i = " + i);
    var image = new Image();
    var thisphotowidth ="";
    image.src = i;
    thisphotowidth = image.width;
    window.alert("thisphotowidth = " + thisphotowidth);
    return thisphotowidth;
    }
    When I refresh the page it works.
    I have left the window.alerts in for debugging on the first run through of the
    code i shows the file path of my image but thisphotowidth = 0
    On refresh i is the same again and thisphotowidth is the size of the photo.

    What is flummoxing me is that another function, yes you guessed it, heightfind() is working fine on the initial run and returning the height of the photo first time round with no refreshes necessary.
    Code:
    function heightfind(j){
    window.alert("j = " + j);
    var image = new Image();
    var thisphotoheight ="";
    image.src = j;
    thisphotoheight = image.height;
    window.alert("thisphotoheight = " + thisphotoheight);
    return thisphotoheight;
    }
    Any clues?


    Thanks

    Dan
    Last edited by Danfoord; 08-07-2008 at 08:08 PM.

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    It is because the DOM has not loaded the image yet. You do set a new image correctly and pass the src in correctly too, but the image isn't being loaded until the function is called. Once the function is called the image loads but as soon as the browser starts to load the image it moves on to the next line of code, so at that point "image.width" has no width.

    Try this it should help
    Code:
    function widthfind(i){
    window.alert("i = " + i);
    var image = new Image();
    var thisphotowidth ="";
    image.src = i;
    thisphotowidth = image.width;
    setTimeout("window.alert("thisphotowidth = " + thisphotowidth);
    return thisphotowidth;",1000)//this will give your browser 1 second to load the image
    }
    Also if you are calling heightfind after widthfind it may be returning the height of image i

  • #3
    New Coder
    Join Date
    Oct 2004
    Location
    Switzerland
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for that , however that now means that the function which is waiting for the returned width is not receiving it and I am getting another
    error message.
    "NaN"



    Dan

  • #4
    New Coder
    Join Date
    Oct 2004
    Location
    Switzerland
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for that , however that now means that the function which is waiting for the returned width is not receiving it and I am getting another
    error message.
    "NaN"

    Am I going to have to set as Time out for all following functions?
    It seems that


    Dan

  • #5
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    What is the reason for these functions? Are you trying to write them to the page? if so you could just do something like this after each image was loaded
    Code:
    <p><script type="text/javascript">document.write(image.width);</script></p>
    Also do you need the images to only load when you call the function or can you set them before like this
    Code:
    images[0] = new Image();
    images[1] = new Image();
    images[0].src = i;
    images[1].src = j;
    That way they would preload when the page loads

  • Users who have thanked ninnypants for this post:

    Danfoord (08-08-2008)

  • #6
    New Coder
    Join Date
    Oct 2004
    Location
    Switzerland
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry about the mangled previous posts I'm clearing my cache each time I load my test page and something went a bit awry.

    Dumb question but does preloading them mean that they will be visible?

    Dan
    Last edited by Danfoord; 08-07-2008 at 09:12 PM.

  • #7
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    nope not until you assign their src to an image tag with one of the following
    Code:
    document.imagename.src = images[0].src;
    document.imagename.setAttribute("src",images[1].src);

  • #8
    New Coder
    Join Date
    Oct 2004
    Location
    Switzerland
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Spot on.

    Works. Preloaded the images on the inital page and circumvented the problem.

    Dan

  • #9
    New Coder
    Join Date
    Oct 2004
    Location
    Switzerland
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Arse!
    Have realised, after takeing out some alert boxes, that they were slowing the process down and allowing things to load before the process progressed.
    I'm back to square one.
    Please ignore the v. bad coding of the initial loading of the photos (I will fix that once the page works!).

    Could you confirm very quickly that this page is preloading? -
    Code:
    <head>
      <title></title>
      <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
      <link rel="stylesheet" href="stylesheet.css" type="text/css">
    <script src="javafunctions.js"></script>
    <script language="JavaScript1.1">
    var photos=new Array()
    var which=0
    
    
    /*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
    photos[0]= new Image();
    photos[1]= new Image();
    photos[2]= new Image();
    photos[3]= new Image();
    photos[0].src="photos/ kev 1.jpg"
    photos[1].src="photos/ kev 2.jpg"
    photos[2].src="photos/kev 3.jpg"
    photos[3].src="photos/ kev 4 (2001 birthday).jpg"
    photos[0].name="photos/ kev 1.jpg"
    photos[1].name="photos/ kev 2.jpg"
    photos[2].name="photos/ kev 3.jpg"
    photos[3].name="photos/ kev 4 (2001 birthday).jpg"
    
    
    </script>
    </head>
    <body>
    
    <script language="JavaScript1.1">
    <!--
    var photowidth = widthfind(photos[0].name); <<this function is returning 0 on initial load and is the method I posted in my original post
    var photoheight = heightfind(photos[0].name);<< and now this one too!
    //window.alert("Photos[0]" + photos[0]);  << these are some of the windows I was using for debugging
    //window.alert("photowidth" + photowidth);
    //window.alert("photoheight" + photoheight);
    createpage("Maintain radio silence", photos[0].name,photowidth,photoheight);
    
    
    // -->
    
    
    
    </script>
    </body>
    </html>


  •  

    Posting Permissions

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