PDA

View Full Version : completed loading function not working?

pavinder
03-20-2005, 08:11 AM
Hi,

I am using the following code in a page within a frameset. The frame id is "imagepage".

I want to scroll to a fixed position on loading, and because there are a number of large images loading, i figured I'd need to check the load status before attempting the scroll command.

I'm using the code as follows, but the scroll is not happening.

I also tried the last line using "parent.imageframe.window.scrollTo" but still no effect. I put an alert between the setInterval and the scrollTo statements, and the alert comes up even though I can still see the page loading indicator running.

Any help gratefully appreciated.

--------------------
in the <HEAD>:

function checkloaded()
{
alldone = document.images.length;
temp = new Array(0);
for (var i=0;i<alldone;i++)
{
if (document.images[i].complete)
{
temp[temp.length] = i
}
}

if (temp.length == alldone) {clearInterval(waitcheckloaded);}
}

and in the <BODY>:

a number of images are loaded in DIV statements for example
<div class="divstylev" id="layer01"><img src="i01.jpg" height="32767" width="32767"></div>

and after that I have the statements

waitcheckloaded = setInterval("checkloaded()", 10);
window.scrollTo(15000, 15000);
------------------------
Philip M
03-20-2005, 08:19 AM
I think that the problem could be

setInterval("checkloaded()", 10);

as 10 milliseconds is not long enough for the image to load.

Try (say) 5000 (= 5 seconds)
pavinder
03-20-2005, 01:09 PM
As far as I understand, the interval length will simply affect the number of iterations of the loop. The function should still loop until all images are loaded and then the interval be cleared.

The problem here is that the "loaded" alert is appearing INSTANTLY, before the checkloaded function has even iterated once!

I have modified the function slightly, added more alerts as follows:
-----------------------
function checkloaded()
{
alldone = document.images.length;
alert("alldone is " + alldone);
var temp = 0;
for (var i=0;i<alldone;i++)
{
alert("i is " + i); j = 100+i; alert("j is " + j);
if (document.getElementById('img' + j).complete)
{
temp+=1
};
};
alert("temp is " + temp);
if (temp == alldone) {clearInterval(waitcheckloaded);}
}

I have modified the DIV statements as follows:
<div class="divstylev" id="layer01"><img src="i01.jpg" height="32767" width="32767" id="img101"></div>

and in the body put:
waitcheckloaded = setInterval("checkloaded()", 1000);
alert('loaded');
parent.imageframe.window.scrollto(15000, 15000);
-----------------------------------------

And now things are completely confusing me.

The loop starts after a few seconds (the interval time?), and I see:

alldone is 10 (i.e. the number of images)
i is 0
j is 100
alldone is 10
i is 0
j is 100
alldone is 10
and so on again and again and again. But I NEVER see the alert "temp is..." - wtf?? It's the next statement in the function!
I must be missing something really obvious, but cannot see where.

Eventually the images appear on screen as they have completed loading, but I am still locked inside this looping function, which obviously has not done its job.

Any help appreciated please....