infinte loop while trying to display buffer symbol as pics preload

Question

I am really getting frustrated with this. So I am making a slideshow with javascript but while all the images are being loaded I would like to show a buffering symbol..

here is the buffering symbol code.. if you have a better way of doing it please speak up.

function loadAnimation(){
        setTimeout(
            "document.getElementById('main_photo_img').src = 'images/loadBar1.jpg'", 300);
        setTimeout(
            "document.getElementById('main_photo_img').src = 'images/loadBar2.jpg'", 600);
        setTimeout(
            "document.getElementById('main_photo_img').src = 'images/loadBar3.jpg';", 900);
        }

that displays 3 images that make up a buffer animation.

my code for playing it until an image is loaded is this..

while(!pic1.onload){
    loadAnimation();
}

All that happens though is an infinite loop.

Are you trying to do something like this? http://jsfiddle.net/jHJeU/1/ — Jared Farrish, Dec 18 '11 at 03:23
an alternative is to load a loading graphic (small, cached, loads as DOM loads) and update it with the larger images after the page has loaded. Example: http://jsfiddle.net/jimschubert/a2LR5/ You can build a loading graphic at http://ajaxload.info. edit: I think I misread your question. The ajaxload.info site may help you greatly. — Joseph Yaduvanshi, Dec 18 '11 at 03:42

Esailija · Answer 1 · 2011-12-18T03:29:24.563

2

Try something like this:

function loadAnimation() {
    var i = 0,
        timer;
    (function k() {
        var cur = i++ % 3 + 1;
        document.getElementById('main_photo_img').src = 'images/loadBar' + cur + '.jpg';
        timer = setTimeout(k, 300);
    })()
    return {
        cancel: function () {
            clearTimeout(timer);
        }
    };
}


....

var animation = loadAnimation();
pic1.onload = animation.cancel; //The cancel will be called when pic1 loads. You may add other code in the cancel function if needed

I'd probably just use a gif or css background sprites, setting src dynamically is probably the hackiest way to do this I've seen to date ;p

edited Dec 18 '11 at 03:29

answered Dec 18 '11 at 03:24

Esailija

138,174
23
272
326

Ok, I *think* I see what's going on; the OP is wanting to jerry rig a loading graphic? – Jared Farrish Dec 18 '11 at 03:32
@JaredFarrish yes I intepreted it as a way to show some loading bar animation while the image loads. Of course, it will never animate at all because the time between frames is 300ms, but meh :P – Esailija Dec 18 '11 at 03:39
Whatever happened to just using a throbber? – Jared Farrish Dec 18 '11 at 03:44
could you elaborate on what makes it hacky? why would css be a better way? I am new to javascript so idk why it's wrong. I wanna change an image src so it appears to be loading. – Chris Dec 19 '11 at 00:03
@Chris http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=css+sprite or make a separate question or search or use gif animations – Esailija Dec 19 '11 at 01:09

Adam Rackis · Answer 2 · 2011-12-20T19:31:39.643

0

Here's a recursive setTimeout version which I think is what you're looking for.

var i = 0, intervalId;
function animate(){
    var newImg = 'images/loadBar' + ((i++ % 3) + 1) + '.jpg'
    document.getElementById('main_photo_img').src = newImg;
    intervalId = setTimeout(animate, 300);
}

And again, you'd stop this with

clearInterval(intervalId);

To start it with the first image showing up immediately you'd simply call

animate();

But to have the first image wait 300ms before showing, you would do

intervalId = setTimeout(animate, 300);

edited Dec 20 '11 at 19:31

answered Dec 18 '11 at 03:31

Adam Rackis

82,527
56
270
393

Not a fan of `setInterval()`, especially here. Better to set a new `setTimeout()` at the end of the last, in my opinion. – Jared Farrish Dec 18 '11 at 03:33
@JaredFarrish - why? Wouldn't you have to keep recursively calling setTimeout each time? Isn't this what setInterval is designed for? – Adam Rackis Dec 18 '11 at 03:36
Also, how is it canceled when the other event is finished (a picture loaded, I believe)? – Jared Farrish Dec 18 '11 at 03:36
Because `setInterval()` is not guaranteed to run at any interval except when the browser gets to it. It's just unreliable and should be avoided, IMO. – Jared Farrish Dec 18 '11 at 03:37
@JaredFarrish - I did forget to include instructions for halting it. So do "good" browsers like Chrome and FF handle setInterval well in your experience? Or is it flawed across the board? – Adam Rackis Dec 18 '11 at 03:39
This probably explains it sufficiently: http://stackoverflow.com/a/7143043/451969 AFAIU, it's by just how JS works, since it's single-threaded. – Jared Farrish Dec 18 '11 at 03:41
@JaredFarrish, agree and there are many more arguments against [setInterval](http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=setinterval+harmful). Also its much easier to work with setTimeouts in your code. setInterval is right up there with eval and array for..in. – Esailija Dec 18 '11 at 03:44
@JaredFarrish - ok, I guess I learned something new today. Answer is updated. Thanks for pointing that out. – Adam Rackis Dec 18 '11 at 03:53
It was a wrinkle I didn't know about until a few months ago when somebody else pointed it out. – Jared Farrish Dec 18 '11 at 03:55

infinte loop while trying to display buffer symbol as pics preload

2 Answers2