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

    image loading problem

    This problem has been bugging me for several days now.

    Why is it that the webpage below needs to be refreshed before photos[0].width (or height) return the correct size.

    On the first load it returns 0 for both width and height.

    If I insert an alert window before photoWidth[0] = photos[0].width; then the correct width AND height are returned.

    With the help of other posters I think I have found out it is not a problem
    with the speed of the images being loaded. I have tried:
    setTimeout
    tried dummy loops up to 100000000
    a pause computer function which works using the Date object. I pause the computer for upto 5 seconds and still the width and height were 0.

    An alert window is the ONLY work around at the moment.

    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 photoWidth = new Array()
    var photoHeight = new Array()
    
    
    photos[0]= new Image();
    photos[1]= new Image();
    photos[0].src="1.jpg"
    photos[1].src="2.jpg"
    photos[0].name="1.jpg"
    photos[1].name="2.jpg"
    
    //alert("blah blah");
    photoWidth[0] = photos[0].width;
    photoWidth[1] = photos[1].width;
    photoHeight[0] = photos[0].height;
    photoHeight[1] = photos[1].height;
    
    
    </script>
    </head>
    <body>
    <script language="JavaScript1.1">
    <!--
    
    createpage("Maintain radio silence", photos[0].name,photoWidth,photoHeight);
    // -->
    </script>
    </body>

    Thanks

    Dan
    Last edited by Danfoord; 08-11-2008 at 10:37 AM. Reason: mistake in code

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    If you want the dimensions of an image, first you create the image object, then install an onload handler that initialises all subsequent code that relies on the availability of the dimensions, then you apply the src property.
    It's advisable to install an onerror handler also in case the image doesn't load.

    Solutions involving time delays are right out.

  • #3
    New Coder
    Join Date
    Oct 2004
    Location
    Switzerland
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Just to clarify are you saying that I should make my code something like this:
    (forgetting the error handler for the moment)
    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 photoWidth = new Array()
    var photoHeight = new Array()
    
    
    photos[0]= new Image();
    photos[1]= new Image();
    //photos[0].src="1.jpg"
    //photos[1].src="2.jpg"
    photos[0].name="1.jpg"
    photos[1].name="2.jpg"
    
    //alert("blah blah");
    photoWidth[0] = photos[0].width;
    photoWidth[1] = photos[1].width;
    photoHeight[0] = photos[0].height;
    photoHeight[1] = photos[1].height;
    
    
    </script>
    </head>
    <body onload = "createpage('Maintain radio silence', photos[0].name,photoWidth,photoHeight);"
    >
    </body>
    Dan

  • #4
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by Danfoord View Post
    J
    Code:
    //photos[0].src="1.jpg"
    //photos[1].src="2.jpg"
    ...
    <body onload = "createpage('Maintain radio silence', photos[0].name,photoWidth,photoHeight);"
    If you use a body tag onload handler as you suggest, then you can apply the src as before since the function won't be called until the images are loaded.

  • #5
    New Coder
    Join Date
    Oct 2004
    Location
    Switzerland
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Job done.

    Thanks


  •  

    Posting Permissions

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