•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 401,469 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,031 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1334 | Replies: 8 | Solved
 |
•
•
Join Date: Oct 2005
Posts: 236
Reputation: 
Rep Power: 3
Solved Threads: 5
Posting Whiz in Training
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.
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>
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
•
•
Join Date: Apr 2007
Location: Birmingham
Posts: 368
Reputation:
Rep Power: 2
Solved Threads: 35
Posting Whiz
why not use the "defer" attribute of the script tag?
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.
<script type='text/javascript' defer='defer'>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.
Last edited by Fungus1487 : May 13th, 2008 at 12:06 pm.
When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 5
Posting Whiz in Training
defer didnt work, i tried that first; body onload works but is pretty slow
Last edited by Inny : May 13th, 2008 at 12:22 pm.
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
•
•
Join Date: Apr 2007
Location: Birmingham
Posts: 368
Reputation:
Rep Power: 2
Solved Threads: 35
Posting Whiz
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 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.
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)"
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>
When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 5
Posting Whiz in Training
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?
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?
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
•
•
Join Date: Apr 2007
Location: Birmingham
Posts: 368
Reputation:
Rep Power: 2
Solved Threads: 35
Posting Whiz
yes that may just work. but the increased time in doing this loop may take just as long as your original solution.
When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 5
Posting Whiz in Training
just incidently your example gives 'object expected' error. dosent open enlarged
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
•
•
Join Date: Apr 2007
Location: Birmingham
Posts: 368
Reputation:
Rep Power: 2
Solved Threads: 35
Posting Whiz
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.
When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design
•
•
Join Date: Oct 2005
Posts: 236
Reputation:
Rep Power: 3
Solved Threads: 5
Posting Whiz in Training
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!
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!
Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields
W. C. Fields
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
Similar Threads
- Unresponsive script (DaniWeb Community Feedback)
- Hijack problems - Cannot get rid of! (Viruses, Spyware and other Nasties)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: buttons with variable lenght and curvy corners
- Next Thread: scrolling
