Join GitHub today
Better image preloading order #10
Olivier de Broqueville expressed an idea to improve preloading of images by changing the order of loading the frames. He suggested loading the very first image, then the ones to the left and right and progressively continue.
For example (36 frames total, first frame is 1) the loading order would be:
Please vote for this issue!
Folks, I soon abandoned the original idea (but that doesn't make it bad at all - it just seems far to linear to me now ;).
Instead, I wanted to build up a solution, which would load the frames in more of a scattered fashion, where the loading "penalty" would be evenly spread amongst all. This way, instead of one large shrinking gap of missing frames, there will be many small shrinking gaps spread evenly across the entire 360° spectrum. Resulting in perceived lower rotation fidelity/quality/smoothness instead of an apparent gap.
So, I tailored a mechanism, which aims to accomplish it. First it queues up one frame each 90° (very rough rotation, but already possible) and then it works with these 4 resulting segments. By progressively halving them, segments are gradually and evenly filled up, increasing the fidelity and smoothnes of the rotation. Speaking in degrees:
You can see it in action on http://test.vostrel.cz/jquery.reel/test/sampler.html - for sequences the bottom-most section "Images" features all frames in order of preloading (via new data key
For multi-row and dual-orbit movies, the mechanism is the very same with just one difference, that the initial row is queued first and all remaining follow.
I'm pretty happy with the outcome so far. What do you think?
wow your approach does seem to load better, and it has sense. very very nice work.
sidenote: performance wise it's always good to set the width and height tags of the image. so is there a way for jquery reel to add width and hight to the images created from jquery reel array. it can use the same width and height of the main "img" on which the jquery reel is initialised.
thank's man. keep up the good work.
I've made a little visualisation to help us better understand the so called Increasing Fidelity approach:
From the vis I recognize one possible weakness - the directionality of the (clockwise) queuing. It is still too linear to me, but it'll do.
@cindreta, you are right! Loading with defined dimensions is indeed faster, when the image is to be rendered (not our case, I'm afraid), but I guess it won't hurt and is worth the try. Thanks, it's a good one :)
@cindreta, to your other question: yes, it should be faster. But frankly, saving 1 frame from let's say 36 total isn't a big deal I guess. On the other hand having the entire
added a commit
Nov 5, 2011
added a commit
Nov 6, 2011
As a part of this issue a new
As I want to leave the preloading logic ideally completely up to you, you can set up your own custom preload order function. It has to be defined as a member of
For the mode to be used, you then set the
Pull requests with better preloading orders will be warmly welcome! ;)