Stop do while loop - image preloader

[David]

Hi everyone,

I am trying to stop an image preload sequence by the click of a mouse but
have been unsuccessful trying several methods. Imagine this simple script
below that loads 50 images to cache. If the stopPreload() function is
activated and the ret val set to false, the preload() function still
continues to the end.

Any suggestions on how to stop the preload() function in its process, what
conditions are necessary?

var ret=true;
function preload(){
var k=1;
do {
theImageSrc="image"+k+".jpg";
document.imgArry[k]=new Image;
document.imgArry[k].src=theImageSrc;
k++;
}
while (ret==true && k < 50)
}
}

function stopPreload(){
ret=false;
}

Thanks, David

 

[Baconbutty]

If I understand you correctly, you want to be able to stop the loop in
response to an onclick event.

As far as I understand things (others will no doubt correct me/express
it more accurately) as a general rule, once a function starts running,
the browser window will not respond to any further events until the
function has completed and returned.

Accordingly you cannot (without some fancy foot-work) generally stop a
function by means of a user onclick event once it has begun.

When you click to change ret val, the stopPreload function does not
actually run until preLoad has finished.

The only way I have found (as an amateur) to change this is quite
complicated, and is based on the fact that whilst one "window" may be
unresponsive, others will not be.

1. Make "ret" the property of an object.

var oRet={"ret":true};

while (oReg.ret==true)

2. Before commencing preLoad, open up a dialogue box or iframe (i.e.
a new "window"), which contains the "cancel" button, and pass the oRet
object as a reference.

3. The new window object will detect the onclick event, and can
update the oRet object, which then feeds back to the preLoad function.

I have used this approach before to create progress bars with cancel
buttons as separate dialogue boxes.




2.

 

[David]

If I understand you correctly, you want to be able to stop the loop in
response to an onclick event.

As far as I understand things (others will no doubt correct me/express
it more accurately) as a general rule, once a function starts running,
the browser window will not respond to any further events until the
function has completed and returned.

Accordingly you cannot (without some fancy foot-work) generally stop a
function by means of a user onclick event once it has begun.

When you click to change ret val, the stopPreload function does not
actually run until preLoad has finished.

The only way I have found (as an amateur) to change this is quite
complicated, and is based on the fact that whilst one "window" may be
unresponsive, others will not be.

1. Make "ret" the property of an object.

var oRet={"ret":true};

while (oReg.ret==true)

2. Before commencing preLoad, open up a dialogue box or iframe (i.e.
a new "window"), which contains the "cancel" button, and pass the oRet
object as a reference.

3. The new window object will detect the onclick event, and can
update the oRet object, which then feeds back to the preLoad function.

I have used this approach before to create progress bars with cancel
buttons as separate dialogue boxes.

That's what I thought about the function prosess not being able to be
interupted from another function. At least that's my experience in trying to
get it to stop. Your suggestion sounds good but unfortunately opening a new
"window" isn't an option.

Thanks for the suggestion, David

 

[Grant Wagner]

As already explained, you are in a tight loop, it is unlikely the
browser will respond to any events while executing this code. There is
also a matter of whether JavaScript is multithreaded and can actually
run the stopPreload() function while preload() is executing.

You should be able to make this work, but it will require the use of
setTimeout() or setInterval(), which will slow down your preload
sequence.

var preloadTimer= setInterval(preload, 10);
function preload() {
if ('undefined' == typeof loop) {
loop = 0;
}
document.imgArry[loop] = new Image();
document.imgArry[loop].src = "image" + loop + ".jpg";
if (++loop >= 50) {
clearInterval(preloadTimer);
}
}
function stopPreload() {
if (preloadTimer) {
clearInterval(preloadTimer);
}
}

 

[David]

As already explained, you are in a tight loop, it is unlikely the

browser will respond to any events while executing this code. There is
also a matter of whether JavaScript is multithreaded and can actually
run the stopPreload() function while preload() is executing.

You should be able to make this work, but it will require the use of
setTimeout() or setInterval(), which will slow down your preload
sequence.

Grant,

Thanks, this is interesting. I don't mind a little drag on the preload, just
need to 'pause' or stop it so that I can load an image, that is currently
preloading, that has not yet cached. Otherwise, the image I am trying to
display has to wait until it has been cached by the preloader.

Once this image has been displayed "instantly" or the time it would take to
cache this image only, I can resume the preload, or start it over again.

I'll chew on your example. It looks promising.

David