Member Avatar for Inny

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 by mike_2000_17 because: Fixed formatting
  • 2 Contributors
  • 8 Replies
  • 232 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Inny
Member Avatar for Fungus1487

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.

Member Avatar for Inny

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

Member Avatar for Fungus1487

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>
Member Avatar for Inny

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?

Member Avatar for Fungus1487

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

Member Avatar for Inny

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

Member Avatar for Fungus1487

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.

Member Avatar for Inny

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! :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.