On-load resizing of hidden images

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • brixton
    New Member
    • Nov 2006
    • 35

    On-load resizing of hidden images

    Hello!

    I need to dynamically resize images on my site. Doing this upon window.onload works fine, but some of the images are initially set to display:none which gives them a height and width of 0.

    Any ideas?

    Thanks!
  • RamananKalirajan
    Contributor
    • Mar 2008
    • 608

    #2
    on window.onload collect all the images using document.getEle mentsByTagName( "img"). This will return an array, which will contain all the images, even the images are visible or hidden. Iterate that array and set the height, width dynamically.

    Thanks and Regards
    Ramanan Kalirajan

    Comment

    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694

      #3
      collect all the images using document.getEle mentsByTagName( "img"). This will return an array,
      not entirely correct. it returns not an Array but a NodeList (or HTMLCollection) which barely has any built-in methods (you’ll note the difference, if you try to execute Array methods (like .push()) on it)

      Comment

      • RamananKalirajan
        Contributor
        • Mar 2008
        • 608

        #4
        Thanks for correcting me. I have used the method to get a collection. But now only aware that it is a NodeList not an array. Thanks again

        Thanks and Regards
        Ramanan Kalirajan

        Comment

        • brixton
          New Member
          • Nov 2006
          • 35

          #5
          Thanks, your suggestion is exactly what I was doing.
          However the problem is that in order to set the height for an image, I need to fetch the height of another. Those images that are not visible give me a height and width of 0. The visible images works perfectly.

          Ideas?

          Comment

          • Dormilich
            Recognized Expert Expert
            • Aug 2008
            • 8694

            #6
            However the problem is that in order to set the height for an image, I need to fetch the height of another.
            I don’t understand that

            Comment

            • brixton
              New Member
              • Nov 2006
              • 35

              #7
              I'm placing dynamically sized backgrounds for images, for a shadow effect. So I need to get the height of the image (which may be random) in order to set the appropriate background height. Clearer? :)

              Comment

              • RamananKalirajan
                Contributor
                • Mar 2008
                • 608

                #8
                Hi Brixton,
                You can make a check for visibility
                Code:
                var nodEl = document.getElementsByTagName("img");
                for(var i=0;i<nodEl.length;i++)
                {
                  if(nodEl[i].style.visiblity=="visible")
                  {
                      //your code
                  }
                  else
                  {
                      //your code
                  }
                }
                Thanks and Regards
                Ramanan Kalirajan

                Comment

                • brixton
                  New Member
                  • Nov 2006
                  • 35

                  #9
                  Thanks, but that doesn't help me.
                  I need to change the sizes of ALL images, visible or not, at the time they are loaded.
                  So I figured the best way would be to do it when the window has loaded.
                  Maybe it would be better to do it when each img has loaded, but I read something about all browsers not supporting the onload event for images?

                  Comment

                  • acoder
                    Recognized Expert MVP
                    • Nov 2006
                    • 16032

                    #10
                    Try this: load the images using the Image object (often used for image pre-loading). Then get the image height from that.

                    Comment

                    Working...