4

I am coding a script in which the user selects a range of data, and then I fetch a bunch of images (over 150) from the server and then I loop trough them to make something like a movie. What I want to know is the most efficient way to load prevent lag when moving trough the images.

Currently I am fetching the images from the server using Ajax and store them in a array of Image objects on the JavaScript. In the HTML I have a div tag in which I wish to put the images. After I finished creating all the Image object (and setting their proper src) in the array, I do the following:

imgElem = document.createElement('img');
document.getElementById('loopLocation').appendChild(imgElem);
imgElem.src = images[0].src;

After this I just make that last call but changing the loop index. I do that every 400ms. The loop works, but sometimes it lags and it freezes on an image for longer that it is supposed to be. I want to know if I am able to improve this anymore from the client side or I just need a server that responds faster.

Sednus
  • 2,067
  • 1
  • 18
  • 34
  • Hm, how about preloading all of the images BEFORE you start showing them in a loop? or is that not an option for some reason? – hndcrftd Apr 01 '12 at 07:11
  • I do put them on the array before showing them. – Sednus Apr 01 '12 at 07:14
  • 1
    yes, see the link I posted below, there's a way to run the script upon all of the images have actually successfully loaded into browser's cache, which will allow the loop to avoid loading them "on the fly" – hndcrftd Apr 01 '12 at 07:18
  • What I'm trying to point out, in other words, is that you run the code to preload the images and they start preloading in the background, however as you move on to the "loop" function and the loop starts executing, not all of the images have managed to preload yet, hence you would benefit from the preloading script, like the one Joseph posted – hndcrftd Apr 01 '12 at 07:25

2 Answers2

6

you might wanna consider spriting which is putting all images into one big image. with this, you only need to load one big image, and then just reposition for every scene.

or, you might also want to pre-load those 150 images, before actually using them. you can use JS array to store Image objects and then loop through that array to get your images.

var images = [];
var expectLoaded = 150;

for(var i = 0; i<expectLoaded;i++){
    (function(i){

        //new image object
        var img = new Image();

        //onload hander
        img.onload = function(){

            //after load, push it into the array
            images.push[img];

            //and check if the all has loaded
            if(images.length === expectLoaded){
                //preload done
            }
        }

        //start loading this image
        img.src = //path to image[i];

    },(i));
}

loops block the UI thread. JS is single-threaded, meaning code gets executed in a linear fashion, one after the other. anything that comes after that loop statement will wait until the loop finishes. if that loop takes long... grab some coffee. plus, since you are manipulating the DOM, you don't see the changes since the UI thread is blocked.

but there are ways to bypass this, and one of them is using timeouts to delay and queue the code for later execution, when JS is not busy.

function animate(frameNo){

    //animate frame[frameNo];

    if(frameNo < total_frames){    //make the UI breate in between frames
        setTimeout(function(){   //so that changes reflect on the screen
            animate(++frameNo);  //then animate next frame
        },200);                  
    }
}

//start
animate(0);
Joseph
  • 107,072
  • 27
  • 170
  • 214
  • 1
    so you have images, the issue is framerate? – Joseph Apr 01 '12 at 07:19
  • 1
    hmm, sort of like a spritesheet – Aram Kocharyan Apr 01 '12 at 07:20
  • 2
    if you are doing this "motion picture", it's better doing it on a canvas. that way, you are not hitting on the DOM that hard. manipulating the DOM is an intensive task. – Joseph Apr 01 '12 at 07:22
  • 1
    I think the problem is that I was not using the onload event handler. I;ll try it out. thanks – Sednus Apr 01 '12 at 07:29
  • 1
    loops block the UI thread. while the loop is ongoing, you can't do anything. if you do, the effects are going to be choppy. use a self-calling function delayed by a setTimeout instead so that the UI can breathe in between calls. – Joseph Apr 01 '12 at 07:35
2

I agree with Joseph on his second point. Here's a nice link to accomplish image preloading before you start the loop: http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml

hndcrftd
  • 3,090
  • 1
  • 19
  • 18