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 Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Resizing Thumbnails BEFORE the Image is Actually Loaded 4

Status
Not open for further replies.
BoulderBum

BoulderBum

Programmer
Jul 11, 2002
2,179
US
I want to have a bunch of thumbnails, and I'd like to confine their dimensions to the size of a table cell. The current experimental function I use is this:

Code: 
var maxSize = 30;
	
function ResizeThumbNail( thumb )
{
   var proportion = ( thumb.width > thumb.height ? thumb.width / maxSize : thumb.height / maxSize );
	    
   var newHeight = thumb.height / proportion;
   var newWidth = thumb.width / proportion;
	    
   thumb.height = newHeight;
   thumb.width = newWidth;
}

I call this function in the onload event handler of the image BUT onload doesn't fire until the entire image is loaded, so I get giant pictures and eventually little thumbnails (which sucks).

How can I set the image size BEFORE the images get displayed?
 
Sort by date Sort by votes
You could try the onBeforeLoad event handler, although I think that only works in IE 5+
 
Upvote 0 Downvote
cant you use a server side script like php or something? its a doddle with that...

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Thanks guys.

"cant you use a server side script"

If the images reside on my server, but I don't want to make that assumption necessarily.

Anyone else know of a more portable method of doing this?
 
Upvote 0 Downvote
Are you using onload in BODY or the IMG tag? If you use it in the image tag like in thread216-907940, you might be able to resize it before the image is displayed.

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};
 
Upvote 0 Downvote
I was using the img onload (like the example).

Bummer about this. I wanted to make a slideshow with auto-generated thumbnails (which is why client-side resizing is appropriate), but it sounds like I may have to require that the images are on my own server. :(

Thanks again, guys.
 
Upvote 0 Downvote
Dunno if this is a possibility for you or not, but you could try throwing the pics in a div or span and hide them until the picture has loaded. Once the picture is loaded, resize the image and then set the div or span to be visible. This way the users won't see the big picture being resized, instead the small image will just appear. Here's an example:
Code: 
<script language=JavaScript>
function showPic(pic, obj) {
   pic.height = 100;
   pic.width = 100;
   obj.style.display = '';
}
</script>
<body>
<form name=blahForm>
<span id=imgSpan1 style='display:none'>
<img src='somepic.jpg' onload='showPic(this, document.getElementById("imgSpan1"))'>
</span>
</form>
</body>

-kaht

banghead.gif
 
Upvote 0 Downvote
Nice idea, but it doesn't work for some reason (the onload event fires and appears to reset the display, but the visibility still doesn't change).
 
Upvote 0 Downvote

Personally, I think doing this server-side would be a far better idea - either that, or have a thumbnail for each image.

Force the user to download a 200Kb image when they only need to view a 10Kb thumbnail is pointless and wasteful, IMHO (especially for those who pay for their bandwidth usage).

Hope this helps,
Dan
 
Upvote 0 Downvote
Thanks for the reply.

"Force the user to download a 200Kb image when they only need to view a 10Kb thumbnail is pointless and wasteful"

But like I said 1. It's for a slideshow so the user needs to download every image anyway and 2. I didn't want to assume the photos would reside on my server. If I go into this with the assumption that the user will view every image, it's actually less wasteful in this circumstance to use the client-resize approach because they're only downloading X images instead of X images AND X thumbnails.

That said, I do have a utility I coded that both resizes and compresses images and given the fact that I can't seem to do what I want with javascript, I'll have no choice but to follow your suggestion and use my utility.
 
Upvote 0 Downvote
I haven't tested this, but what about something like this?
Code: 
<html>
<head>
<script>
var maxSize = 30;

function getImg(src){
  var oImg = new Image();
  oImg.src = src;
  var proportion = ( oImg.width > oImg.height ? oImg.width / maxSize : oImg.height / maxSize );
        
   var newHeight = oImg.height / proportion;
   var newWidth = oImg.width / proportion;
   document.write('<img src="'+src+'" width="'+newWidth+'" height="'+newHeight+'">");
}
</script>
</head>
<body>
<script>getImg("myImg.jpg")</script>

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};
 
Upvote 0 Downvote
what about using flash?
even flash 4 could solve your problem quite easily...

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
385
gmmastros
gmmastros
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
898
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
804
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
714
coldbohemia
coldbohemia
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
543
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top