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 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2002
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image width/height not re-read?

    Hi

    On my website I have images with variable width and height.
    I have Javascript code that get the width and height of the image in question with:

    var windowWidth=pic.width
    var windowHeight=pic.height

    This works perfectly. Yesterday, I decided to put the exact same images larger on my web server, and when I look at my website, the content of the variables windowWidth and windowHeight show the values of the old files. Is this normal?
    How to force to READ the image size instead of getting it from a "cache", or is there a workaround? Even when the Temporary Internet Files are cleared, the problem persists. Stronger, the problem even persists when looking the web from the files on the computer. If I rename the image files, the problem is gone. What am I missing?

    I would be very grateful for any help about this incredible problem.

    Richard

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    use

    pic.offsetWidth
    pic.offsetHeight

    instead
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    New Coder
    Join Date
    Sep 2002
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you brandonH, replacing with .width with .offsetWidth is highly probably what I was missing. However, in the below function, it does not work. There is an error message from IE saying that 'preloaded[...].src' is null or not an object. Any suggestion?
    function xim(n)
    { // image from array
    var picName=preloaded[n].src
    var windowWidth=preloaded[n].offsetWidth
    var windowHeight=preloaded[n].offsetHeight
    showit(picName, windowWidth, windowHeight)
    }

  • #4
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    unfortunately, you cannot do so.....

    the values in the array preloaded[ ] are only strings, not actual objects.
    the .offsetWidth and .offsetHeight are only good for actual objects.

    I would recommend displaying the image first, then resizing the window.
    that way the image is loaded into the page ( now an actualy object ) which you can then get the width and height from.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #5
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    there is an alternative though, but it requires that you know the images dimensions already. basically they have to be yoru images, that you know exactly how big they are.

    Code:
    if (document.images){
    preloaded= new Array();
      preloaded[0]= new Image(); 
      preloaded[0].src="closeup1.jpg";
      preloaded[0][1]="300";//width  
      preloaded[0][2]="300";//height
      preloaded[1]= new Image(); 
      preloaded[1].src="closeup2.jpg"; 
      preloaded[1][1]="200";//width  
      preloaded[1][2]="300";//height
    }
    function xim(n)
    { // image from array
    var picName=preloaded[n].src;
    var windowWidth=preloaded[n][1];
    var windowHeight=preloaded[n][2];
    showit(picName, windowWidth, windowHeight)
    }
    if you set the height and width inside the array, you then have a hiehgt and width value to work with before displaying the image. which means you can open up a window, then load the image.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #6
    New Coder
    Join Date
    Sep 2002
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Of course, if the dimensions were known, it would be really easy to add them as parameters. This is what I have done before, but a computer is there to help the humans, and facilitate their job. So, the computer should determine himself the size of the image, which vary from image to image. With preloaded[n].width it worked perfectly until I uploaded the same image with a larger size on the web server.
    Because offsetWidth works only on actual objects as you told me, I was wondering if there was a way to create an invisible object, to get its size, then clear this object?
    Or, is there a way to clear the cache or buffer or whatever where the size of the image is stored? Deleting the Temporary Internet Files and/or rebooting the computer has no effect. I have made some inquiries with Google, but not sure what it does:
    <meta http-equiv="pragma" content="no-cache">

    If there is absolutely no way to get the size of a dynamical image with just the filename stored in an array, my only option for now is to rename the files so their sizes are not yet known.

  • #7
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    there is a way to do what you ask.


    if you create an <img> tag like so:


    <img src="yourfile.jpg" style="visibility:hidden;">

    i would say do style="display:none;"
    but that pulls the object out of the page, there for the .offsetWidth or height would return as 0.

    the visibility leaves the object where it is, but it still takes up that space in the document.

    another option would be to have an iframe that is 0 x 0. (doesnt display).
    then load the image into the contents of the iframe dynamically. the grab the height and width.

    create thiese pages to see:

    main page:
    Code:
    <html>
    <head></head>
    <body>
    
    
    <input type=button onclick="getDimensions('projects/closeup1.jpg');">
    <input type=button onclick="getDimensions('projects/closeup2.jpg');">
    
    <iframe name=IF1 src="blank.htm" width=0 height=0></iframe>
    
    <script type=text/javascript>
    function getDimensions(SRC){
    
    IF1.document.getElementById('div1').innerHTML="<img id=hidimage src='"+SRC+"'>";
    var width=IF1.document.getElementById('hidimage').offsetWidth;
    var height=IF1.document.getElementById('hidimage').offsetHeight;
    alert(width+' x '+height);
    }
    
    </script>
    
    </body>
    </html>
    iframe code:
    Code:
    <html>
    <head></head>
    <body>
    
    <div id=div1></div>
    </body>
    </html>
    Last edited by brandonH; 11-09-2006 at 12:00 AM. Reason: correction
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #8
    New Coder
    Join Date
    Sep 2002
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much brandonH. You have been nominated.


  •  

    Posting Permissions

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