Stop do while loop - image preloader

Discussion in 'Javascript' started by David, Aug 10, 2005.

  1. David

    David Guest

    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
     
    David, Aug 10, 2005
    #1
    1. Advertising

  2. David

    Baconbutty Guest

    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.
     
    Baconbutty, Aug 10, 2005
    #2
    1. Advertising

  3. David

    David Guest

    "Baconbutty" <> wrote in message
    news:...
    > 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
     
    David, Aug 10, 2005
    #3
  4. David

    Grant Wagner Guest

    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);
    }
    }
     
    Grant Wagner, Aug 10, 2005
    #4
  5. David

    David Guest

    > 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
     
    David, Aug 10, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. jj
    Replies:
    3
    Views:
    1,269
    bruce barker
    Jan 20, 2009
  2. FluxForums

    Image Preloader

    FluxForums, Feb 22, 2004, in forum: Javascript
    Replies:
    3
    Views:
    119
    Hywel
    Feb 22, 2004
  3. Image Preloader

    , Dec 4, 2005, in forum: Javascript
    Replies:
    2
    Views:
    110
  4. bedges

    good ole image preloader...

    bedges, Mar 21, 2006, in forum: Javascript
    Replies:
    2
    Views:
    105
    bedges
    Mar 21, 2006
  5. Isaac Won
    Replies:
    9
    Views:
    443
    Ulrich Eckhardt
    Mar 4, 2013
Loading...

Share This Page