Image resize Script

[SchweppesAle]

Hi, I have this script which pulls all images from the page, then resizes and sets their display back to inline.  Unfortunately, rather than waiting for each image to load; it seems to be waiting for all of them before executing the rest of the script.  I've also noticed that having a broken image on the page will cause IE to slow to a crawl.  Any ideas?

 

#center img{
display:none;
visibility:hidden;
}

#Latest img{
visibility:hidden;
display:none;
}

#Latest2 img{
margin-right:5px;
visibility:hidden;
display:none;
}

</style>


<script language="javascript" type="text/javascript">

function checkImageSize()
{
if (document.getElementById('Latest2') != null)
{
resize_FrontAuthor();
}

if (document.getElementById('Latest') != null)
{
resize_ListAuthors();
}


resize_images();

}
</script>





<script language="javascript" type="text/javascript">
<!--
       function resize_images()
  {
	  

var myDiv = document.getElementById('center');
var myImages = myDiv.getElementsByTagName("img");



        for (i = 0; i < myImages.length; i++)
        {
          
	  while ( !myImages[i].complete )
          {
           
          }
	  
	  myImages[i].style.display = "inline";
	  
	  var tempHeight = myImages[i].height;
	  var tempWidth = myImages[i].width;
	  
	  

	  
          if ( myImages[i].width > 300 && (myImages[i].className != 'noresize'))

          {
		  
		  

		  var scaleheight = 300/(myImages[i].width) *(myImages[i].height);
            myImages[i].width = 300;
		myImages[i].height = scaleheight;




			myImages[i].style.cursor='pointer';

          }
	  myImages[i].style.visibility = "visible";
	  
	  
        } 



  }
    //-->
    </script>

	<noscript>
	<style type="text/css">
	#center img{
visibility:visible;
display:inline;
	max-width: 400px;
	width: expression(this.width > 400 ? 400: true);
		}
	</style>
	</noscript>




	<script language="javascript" type="text/javascript">
<!--
     function resize_ListAuthors()
     {

var myDiv = document.getElementById('Latest');
var myImages = myDiv.getElementsByTagName("img");

        for (i = 0; i < myImages.length; i++)
        {
          while ( !myImages[i].complete )
          {
           
          }
	  
	  myImages[i].style.display = "inline";
	  
	  var tempHeight = myImages[i].height;
	  var tempWidth = myImages[i].width;
	  
	  

	  
          if ( myImages[i].width > 100 && (myImages[i].className != 'noresize'))

          {
		  
		  

		  var scaleheight = 100/(myImages[i].width) *(myImages[i].height);
            myImages[i].width = 100;
		myImages[i].height = scaleheight;




			myImages[i].style.cursor='pointer';

          }
	  myImages[i].style.visibility = "visible";
	  
	  
        } 


	}
    //-->
    </script>

	<noscript>

	<style type="text/css">
	#Latest img {
	visibility:visible;
display:inline;
	max-width: 100px;
	width: expression(this.width > 400 ? 400: true);
padding-right:15px;
		}

	</style>

	</noscript>	









<script language="javascript" type="text/javascript">
<!--
       function resize_FrontAuthor()
      {

var myDiv = document.getElementById('Latest2');
var myImages = myDiv.getElementsByTagName("img");

        for (i = 0; i < myImages.length; i++)
        {
          while ( !myImages[i].complete )
          {
            
          }
	  
	  myImages[i].style.display = "inline";
	  
	  var tempHeight = myImages[i].height;
	  var tempWidth = myImages[i].width;
	  
	  

	  
          if ( myImages[i].width > 75 && (myImages[i].className != 'noresize'))

          {
		  
		  

		  var scaleheight = 75/(myImages[i].width) *(myImages[i].height);
            myImages[i].width = 75;
		myImages[i].height = scaleheight;




			myImages[i].style.cursor='pointer';

          }
	  myImages[i].style.visibility = "visible";
	  
	  
        } 


	}
    //-->
    </script>

	<noscript>

	<style type="text/css">
	#Latest2 img {
	visibility:visible;
display:inline;
	max-width: 75px;
	width: expression(this.width > 400 ? 400: true);
padding-right:15px;
		}

	</style>

	</noscript>		

[RichardRotterdam]

what exactly is your script?

[SchweppesAle]

what exactly is your script?

 

it works by taking all images which I've set to display none; displays them inline, scales them down to a set size(if they're too large), then it sets their visibility property to visible. 

 

The only problem with this is that all images display simulatinously "after" the page is done loading.  Is there a better way of doing this?  The script is shown in my last post.

[RichardRotterdam]

 

The only problem with this is that all images display simulatinously "after" the page is done loading.

Sorry bout that I didnt scroll down and only saw the css so thats my bad.

 

Do you mean you want to make the pictures visable with an animation? As in slowly fade them in sequence?

[SchweppesAle]

Not really, although that would be pretty cool.

 

I'm really just trying to make all the images appear(resized) as they're downloaded to the user's browser.  Unfortunately, the script won't set their display to inline until "all" the images are downloaded.  Or at least, that's the impression I'm getting. 

 

So rather than each image appearing one by one as the page is loaded, they all appear at the same time and only if the page has finished loading all other objects.  If one of our banners are taking a long time to appear because google's servers are down, the images flat out just won't show up 

[SchweppesAle]

another thing that I've noticed is that the script will actually lock up Internet Explorer if there's a broken image on the page. 

[darkfreaks]

fixed:

function checkImageSize()
{
if (document.getElementById('Latest2') !== null)
{
   resize_FrontAuthor();
}

if (document.getElementById('Latest') !== null)
{
   resize_ListAuthors();
}


resize_images();

}

[SchweppesAle]

fixed:

function checkImageSize()
{
if (document.getElementById('Latest2') !== null)
{
   resize_FrontAuthor();
}

if (document.getElementById('Latest') !== null)
{
   resize_ListAuthors();
}


resize_images();

}

 

?

[darkfreaks]

changed != to !==

 

its more accurate than !=

[SchweppesAle]

changed != to !==

 

its more accurate than !=

 

was that a joke or are you serious

[darkfreaks]

run your script through jslint.com it picks it up as an error

[SchweppesAle]

....