Resize images before displaying them on screen

[bredge]

Hello there I am using the below code to resize images posted on a forum, however when the page is loading it loads the images full size on sreen stretching the page to however wide the largest picture is and only resizes them once every picture has loaded and the page then goes back to normal width.

Does anyone know how I could make it so the images only display once they've resized ?

<script>

     window.onload = resizeimg;
    function resizeimg()
{
 var theImages = document.getElementsByTagName('img');
 
 for( var i = 0; i < theImages.length; i++ )
 {
  im = theImages[ i ];
       
  if( im.width > 468 && !/\/(pic1\.jpg|pic2\.jpg)/i.test( im.src ) )
  {
   im.style.width = '466px';
   im.style.border = "1px solid #000000";
   im.style.padding = "2px";
   im.style.marginBottom = "1px";
   im.onclick = function()
   {
    window.open( this.src, 'fullscale','width='+ this.width +', height='+ this.height +',scrollbars=1,resizable=1').focus();
   }

   try{ im.style.cursor = 'hand';}catch(e){ im.style.cursor = 'pointer'; }

   im.title = 'Click Here To See Image Full Size ';
  }
 }
}
</script>

[Logic Ali]

Instead of running the code on load, call the function at a point in the document below all <img> tags.
That way the resizing should take place before any images load.

[devnull69]

That way the resizing should take place before any images load.

This is not possible because the code accesses the width property of the images which is only available after the images finished loading.

There is one thing you can do: Set all images to display:none and use an image preloader (search for "javascript image preload") to load all the images without displaying them. Then you can run the script to set the width/height of the images before setting them to display: inline again.

[devnull69]

sorry double post

[Logic Ali]

This is not possible because the code accesses the width property of the images which is only available after the images finished loading.

The code is accessing the <img> elements, whose height and width parameters determine the displayed size of the image.

[devnull69]

@Logic_Ali: I am not sure about that, because the OP refused to show us all of his/her code, especially the HTML. But from the description I assumed that the <img> tags don't have width or height attributes and will be stretched to their full size. That's why he/she wanted to introduce width and height to the images afterwards.

In that case the width/height properties of the images would only be available after the images have been loaded.

[bredge]

So do you guys think there is a way to do it ?

[bredge]

Anyone ?

[rnd me]

css:

img {display:none;}
.done img {display:inline; display:inline-block;}

js

function resizeimg(){
  document.body.className+=" done";
 // ... same as orig

[bredge]

function resizeimg(){
  document.body.className+=" done";
 // ... same as orig

That works stopping the page stretching but you get no images display !!