DaniWeb IT Discussion Community

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)
-   JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)
-   -   Defer until load complete? (http://www.daniweb.com/forums/thread124022.html)

Inny May 13th, 2008 9:20 am
Defer until load complete?
 
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>

Fungus1487 May 13th, 2008 12:06 pm
Re: Defer until load complete?
 
why not use the "defer" attribute of the script tag?

<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.

Inny May 13th, 2008 12:18 pm
Re: Defer until load complete?
 
defer didnt work, i tried that first; body onload works but is pretty slow

Fungus1487 May 13th, 2008 2:36 pm
Re: Defer until load complete?
 
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>

Inny May 13th, 2008 4:20 pm
Re: Defer until load complete?
 
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?

Fungus1487 May 13th, 2008 7:05 pm
Re: Defer until load complete?
 
yes that may just work. but the increased time in doing this loop may take just as long as your original solution.

Inny May 13th, 2008 8:02 pm
Re: Defer until load complete?
 
just incidently your example gives 'object expected' error. dosent open enlarged

Fungus1487 May 14th, 2008 4:31 am
Re: Defer until load complete?
 
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.

Inny May 14th, 2008 11:09 am
Re: Defer until load complete?
 
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! :)


All times are GMT -4. The time now is 10:32 pm.

Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC