My script resizes images (yes, client side! No, I dont have access to do it server side!)

When a topic is posted with alot of images, The script sometimes resizes before all the images load, resulting in images loading after that which are not resized.

How can I ensure the script waits until ALL pics are loaded before resizing?

Or can I get the script to resize each image as It loads or something?
I just want to ensure they are ALL resized in the quickest way possible.

<script type='text/javascript'>
<!--
function ResizeThem(){
maxheight=300;
maxwidth= 300;
imgs=document.getElementsByTagName("img");
for (p=0; p<imgs.length; p++) {
if (imgs[p].getAttribute("alt")=="user posted image") {
w=parseInt(imgs[p].width);
h=parseInt(imgs[p].height);
if (parseInt(imgs[p].width)>maxwidth) {
imgs[p].style.cursor="pointer";
imgs[p].setAttribute('title','Reduced Image - Click to see full size');
imgs[p].onclick=new
Function('onclick=jkpopimage(this.src,600,500);');
imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
imgs[p].width=maxwidth;}
if (parseInt(imgs[p].height)>maxheight) {
imgs[p].style.cursor="pointer";
imgs[p].onclick=new
Function('onclick=jkpopimage(this.src,600,500);');
imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
imgs[p].height=maxheight;}}}}
ResizeThem()
//-->
</script>

Edited 3 Years Ago by mike_2000_17: Fixed formatting

why not use the "defer" attribute of the script tag?

<script type='text/javascript' [B]defer='defer'[/B]>

you could also add an onLoad event handler to run the script once the browser has loaded all information. But defer should work fine for what your after.

defer didnt work, i tried that first; body onload works but is pretty slow

i chopped up your code and used it with some big pics of my band.

here is the result resize example

my connection is fast but it seems to be resizing the image after it is loaded then moving on. But you would have to add an

onload="resizeImage(this)"

to every image tag you want resizing compared to your looping method. Personally i think the iterative loop at the end is a much better approach but this way works too.

var maxwidth = 100;
var maxheight = 100;
function resizeImage(img) {
	if(img.getAttribute("alt")=="user posted image") {
		w=parseInt(img.width);
		h=parseInt(img.height);
		if (parseInt(img.width)>maxwidth) {
			img.style.cursor="pointer";
			img.setAttribute('title','Reduced Image - Click to see full size');
			img.onclick=new
			Function('onclick=jkpopimage(this.src,600,500);');
			img.height=(maxwidth/img.width)*img.height;
			img.width=maxwidth;
		}
		if (parseInt(img.height)>maxheight) {
			img.style.cursor="pointer";
			img.onclick=new
			Function('onclick=jkpopimage(this.src,600,500);');
			img.width=(maxheight/img.height)*img.width;
			img.height=maxheight;
		}
	}
}
<p><img src="img.jpg" alt="user posted image" onload="resizeImage(this)" /></p>

thanks mate, but adding to images just isnt an option im afraid, these are images posted by users with bbcode anyway, hundreds a day.
I appreciate your efforts!
I wonder if you could assign 'onload="resizeImage(this)' to them in the loop, in the same way the title attribute is?

yes that may just work. but the increased time in doing this loop may take just as long as your original solution.

just incidently your example gives 'object expected' error. dosent open enlarged

is the function in the <head></head> area of the html document. the online example i put up works fine in both IE and firefox and the code has just been dragged from that.

I meant your example above when i clicked on it, didnt open enlarged gave me that error in IE6, I didnt test it on my site.
I cant add tags to every image, Im sticking t my original script but calling it onload as you suggested.
Thanks for your Help mate! :)

This question has already been answered. Start a new discussion instead.