Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

resizing image while page loads 1

Status
Not open for further replies.
gormster

gormster

Technical User
Mar 1, 2005
27
AU
is it possible to get an image to resize if it exceeds certain size limits without having to press a button? the problem as i see it is that since it takes time to load an image, if the script is run as the page loads, the image.width and image.height are undefined, meaning that I can't see if they are out of the boundaries and also I can't resize them in proprtion. this it the script i've got which doesn't work:
Code: 
function imgsizer{
	var imgs = document.images;
	var imgHeight = imgs[0].Height;
	var imgWidth = imgs[0].Width;
	var scale;
	if (imgWidth > 800){
		scale = 800 / imgWidth;
		imgs[0].Height = imgHeight * scale;
		imgs[0].width = 800;
	} 
	if (imgs[0].Height > 600){
		scale = 600 / imgHeight;
		imgs[0].width = imgWidth * scale;
		imgs[0].height = 600;
	}
}

i've tried putting this function both in the body onLoad and in the <body></body> tags (without the function {} of course) but none of it seems to work.

is there some way that I can get it to be called after the image loads?
 
Sort by date Sort by votes
You still have to load the full image to the client computer before resizing, so it will take just as long. If you want a program to resize images and do minor touchups, I recommend Irfanview.

Lee
 
Upvote 0 Downvote
no, the thing is the page doesn't know how big the picture will be until it loads - it's like a random image slideshow sort of thing. the problem is, some of the pictures are off digital cameras, so they're huge. i'm not the person who puts them there, our users do, so I don't really want to have to go through each and every one with photoshop resizing them all.

what i want is to restrict the size of the image box, but if the photo isn't as big as the image box, then don't stretch it out so that it is. same for proporions, i don't want the box to stretch the image out of proprtions.

i'm just wondering if it's possible.
 
Upvote 0 Downvote
yeah but what i want to do is set off this particular script AFTER the image has loaded, but WITHOUT any outside input.
i can resize the images fine, but basically what i need is an onLoad event for images, or some other alternative.

is there some way i can tell what the dimensions of an image are going to be before it loads? i'm open to asp here as well.
 
Upvote 0 Downvote

Server-side coding would be the way to go here. You could dynamically deliver a smaller version of any image to the page.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Code: 
//-------------
gf_GetImgSize = function (name)
//-------------
  {
  var cx,cy;
  var tempImg = document.createElement('IMG');
  var bdy     = document.getElementsByTagName('body').item(0);
      tempImg.style.visibility = 'hidden';  
      tempImg.src = name;
      bdy.appendChild(tempImg);
      cx = parseInt(tempImg.width);
      cy = parseInt(tempImg.height);
      bdy.removeChild(tempImg);
      return [cx,cy];
  }

---------------------------
ServerOp: LogicSoft
 
Upvote 0 Downvote
That is just a work around, it still involves downloading the image. I guess it would be better to preload the images and .src refers to preloaded image object property src.

---------------------------
ServerOp: LogicSoft
 
Upvote 0 Downvote

This might be an ideal use for the "lowsrc" attribute. You can specify it like this:

Code: 
<img src="highRes.jpg" lowsrc="lowRes.jpg">

The image specified in the lowsrc attribute will load first, and the regular one afterwards... Bbut at least they will see something while the page is loading.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
thanks for all the help guys, but I think I'm gonna have to use server-side for this. thanks once again,
-gorman
 
Upvote 0 Downvote
i take it all back.
the problem seems to actually lie somewhere in my code; even if i trigger the function AFTER the image has loaded, it still gives me dimensions of 'undefined x undefined'

here is the code after ASP evaluation:
Code: 
<script language="JavaScript">
<!--
function imgsizer(){
	alert("imgsizer entered");
	var imgs = document.images;
	var imgHeight = imgs[0].Height;
	var imgWidth = imgs[0].Width;
	var scale;
	alert(imgHeight+" x "+imgWidth);
	if (imgWidth > 800){
		alert("entered if");
		scale = 800 / imgWidth;
		alert(scale);
		imgs[0].Height = imgHeight * scale;
		imgs[0].width = 800;
		alert("reached end of if #1");
	} 
	if (imgs[0].Height > 600){
		scale = 600 / imgHeight;
		imgs[0].width = imgWidth * scale;
		imgs[0].height = 600;
	}
}
-->
</script>
</head>

<body bgcolor="CAD0ED" onLoad="imgsizer()">
<p><img name="simage" src="[URL unfurl="true"]http://img198.echo.cx/img198/8718/jennaandmelindarookienurses3ys.jpg"[/URL] onClick="imgsizer()"></p>
<p>Jenna and Melinda</p>

</body>
when i open this page, i get two alerts, "imgsizer entered" (good) and "undefined x undefined" (bad). Why are my image.width and image.height properties being returned "undefined"?
 
Upvote 0 Downvote
PS I am getting no warnings or error messages in the console.
 
Upvote 0 Downvote
PPS I forgot to mention that when I click the image I get the same two alerts, including "undefined x undefined
 
Upvote 0 Downvote
gormster-

You have capitalization errors. Javascript is a case sensitive language (unlike asp).

Code: 
change all 
[COLOR=red] imgs[0].Width [/color]
and
[COLOR=red] imgs[0].Height [/color]

to 
[COLOR=blue] imgs[0].width [/color]
and
[COLOR=blue] imgs[0].height [/color]

Here is a helpfull tip too. Firefox's has a javascript console that catches all javascript errors. Tools>Javascript Console

Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

robert (at) robertcarpenter (dot) net
 
Upvote 0 Downvote

Although the width and height attributes are needed for validation, I believe.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote

You don't understand why anyone would want to validate code, or you don't know if gormster would want to validate his particular code?

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote

Yes. The example you gave above would not validate without width, height, and alt attributes, I believe.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

penguinspeaks
  • Locked
  • Question
JS Open print dialog page to print a file
Replies
0
Views
353
penguinspeaks
penguinspeaks
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
558
waubain
waubain
chillay
  • Locked
  • Question
Add Control + F feature to a Web Page
Replies
3
Views
364
feherke
feherke
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
292
gmmastros
gmmastros
dannyo12
  • Locked
  • Question
Async library error in terminal while running Ethereum Smart Contracts test with mocha?
Replies
0
Views
184
dannyo12
dannyo12

Part and Inventory Search

Sponsor

Back
Top