Jump to content

Image resize Script


SchweppesAle

Recommended Posts

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>		

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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  :P

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.