CODEWITHSUNDEEP
javascriptjqueryinscopeapps
Darren
Darren

Reputation: 43

Modifying flipbook jquery to load faster

I am using the Flipbook jquery plugin with a large png image sequence. I emailed the creator of the plugin and asked if there's any way to create some sort of "loader" or allow it to load in chunks and start playing after a certain amount of images are loaded. He responded with the following:

This should be possible and I was thinking of doing this but it wasn't needed at the time.

In the flip book code the shouldStartAnimation function determines if the animation should start by incrementing a counter and checking that counter against the total number of frames. When all the frames have been loaded the timer starts which flips the frames. This code could be changed so the timer starts after half the frames were loaded or something. It could also get really fancy and figure out how long each frame is taking to load and then guess how many frames it needs to let load before it can start playing the sequence so all the frames are loaded by the time it needs them.

Unfortunately I don't have time to make these changes myself, but feel free to modify this code for your needs :)

https://gist.github.com/719686

Unfortunately I don't know enough javascript to get this done, and I don't know exactly how much work this would be for someone who did. I am just hoping someone here might have some more helpful info or advice to help me figure this out (or, obviously, if this is easy enough for someone to just do, that would be amazing).

Upvotes: 3

Views: 791

Answers (1)

Tumharyyaaden
Tumharyyaaden

Reputation: 2903

Add one more option default, the following, make sure to have proper "comas" in right places. 

'loadbeforestart': 10, //start animation when 10 frames are loaded

And edit a variable in the following function, replace variable "end" with "loadbeforestart" 

function shouldStartAnimation(){
    //console.log('pre: '+imageName(i));
    preloadCount += step;
    if(preloadCount >= loadbeforestart){
        setTimeout(flipImage, holdTime);
    }
}

This should do the trick, I think*

Upvotes: 0

Related Questions