On-load resizing of hidden images

[brixton]

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]

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

[Dormilich]

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)

[RamananKalirajan]

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

[brixton]

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?

[Dormilich]

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

[brixton]

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? :)

[RamananKalirajan]

Hi Brixton,
You can make a check for visibility

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

[brixton]

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?

[acoder]

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