...

View Full Version : running script AFTER image loads



doozer
08-15-2005, 11:13 PM
Hi guys,

I'm on the look out for some help again.

I am trying to write a scalable webpage for displaying a library of images.

I am using javascript to generate as much of the html dynamically to make modifying the site as simple as addaing a few lines of html and adding some new image files to the directory.

I am close but have a specific problem that I suspect I am just too dense to crack.

This link demonstrates what I have so far.
http://myweb.tiscali.co.uk/warbossdoozer/test/index.html

My problem focuses around these two JS functions that generate the HTML and position the images.

function fillDiv (a,b){
targetDiv = document.getElementById(a);
imgCount=b;
divContent='';
for (n=1;n<=imgCount;n++) {
divContent+='<IMG ID="'+a+'img0'+n+'" SRC=""><DIV ID="'+a+'img0'+n+'shdw" CLASS="shadow"></DIV>';
}
targetDiv.innerHTML = divContent;
}

function formatDiv (a,b){
section = a.slice(0,2);
page = a.slice(2,4);
imgCount=b;
shdwOffset = 10;
imgWidthTotal = (shdwOffset*imgCount);
for (n=1;n<=imgCount;n++) {
newImg = new Image();
newImg.src = section+'_page'+page+'_image0'+n+'.jpg';
x = a+'img0'+n;
targetImg = document.getElementById(x);
targetImg.src = newImg.src;
}
spacer = (800-imgWidthTotal)/(imgCount+1);
leftPosition = spacer;
for (n=1;n<=imgCount;n++) {
x = a+'img0'+n;
targetImg = document.getElementById(x);
y = a+'img0'+n+'shdw';
targetShdw = document.getElementById(y);
targetImg.style.left = leftPosition;
targetShdw.style.left = leftPosition+shdwOffset;
targetImg.style.top = (400-targetImg.height-shdwOffset)/2;
targetShdw.style.top = ((400-targetImg.height-shdwOffset)/2)+shdwOffset;
targetImg.style.visibility = '';
leftPosition += targetImg.width+shdwOffset+spacer;
}
}

As you will see from the demo, the positioning does not work because the images have not loaded yet so image height and width are 0.

Having pored over the forums I think my solution probably lies in using 'image'.complete to detect whether the set of images has been loaded before applying the positioning function. I am not sure how I can incorprate such a function into what I already have however. I don't even know when the browser 'loads' the image. Is it at the newImg.src stage or when it gets displayed on screen?

Also I have noticed some browser differences with this code. Do the browser load images in different ways/at different times or is it just 'one of those things'.

Please note I want to avoid preloading the images as I could be dealing with HUNDREDS of images on the finished page and this would make load times horrendous (would it not?).

On a side note, I would like to hear from someone with experience whether an implementation of DOM rather than my innerHTML function, would be a better implementation for these purposes, or would it have no real advantage. (I confess to knowing very little about DOM but if it would help I'm willing to learn). :D

P.S. I realise the newImg = new Image bit is redundant but I read somewhere that using the image constructor grabbed theimage properties so I tried it as a fix. Obviously it didn't work. :(

Thanks in anticipation of help

Doozer

vwphillips
08-15-2005, 11:38 PM
ImgSRC=new Image();
ImgSRC.onload=function(){ whateverFunction(this); }
ImgSRC.src=MyImage.gif;

will call whateverFunction when the imageMyImage.gif has been located and the height and width available.

doozer
08-16-2005, 01:52 AM
Thanks for the tip, I hadn't thought of that as a possible solution.

I cannot for the life of me see how I can implement that with what I have already.

I need to call the formatDiv function after all 2 or 3 images in the page have loaded, but I don't want anything to appear on screen until after I have done all of this.

Will onLoad work before I display the images on the screen?

:confused:

vwphillips
08-16-2005, 09:20 AM
<html>
<head>
<script>

var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
var ImgAry=new Array('One.gif','Two.gif','Three.gif');
var ImgSRCAry=new Array();
var Cnt=0;

function Preload(){
for (i=0;i<ImgAry.length;i++){
ImgSRCAry[i]=new Image();
ImgSRCAry[i].onload=function(){ whateverFunction(); }
ImgSRCAry[i].src=ImgPath+ImgAry[i];
}
}

function whateverFunction(){
Cnt++
if (Cnt==2){
alert('call formatDiv()' );
}
}

</script>
</head>
<body onload="Preload();" >
I need to call the formatDiv function after all 2 or 3 images in the page have loaded, but I don't want anything to appear on screen until after I have done all of this.
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum