javascript - Fast Loading of many images on html - Stack Overflow

admin管理员组

文章数量:1297073

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.

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.

• javascript
• html
• ajax

Share Follow asked Apr 1, 2012 at 7:06 SednusSednus 2,11311 gold badge1818 silver badges3535 bronze badges 4

• 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 Commented Apr 1, 2012 at 7:11
• I do put them on the array before showing them. – Sednus Commented Apr 1, 2012 at 7: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 Commented Apr 1, 2012 at 7: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 Commented Apr 1, 2012 at 7:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 es 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);

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

本文标签： javascriptFast Loading of many images on htmlStack Overflow