Comments (11)
that would be cool!
from reel.
yes this would be a great idea to implement.
from reel.
Well, good then I'm working on this feature these days ;)
from reel.
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:
- First the 0° initial
frame
would be loaded, - Next are the three remaining: 90°, 180° and 270°,
- Then each ninety degree segment is divided in half: 45°, 135°, 225° and 315°,
- Then again all segments in half: 22.5°, 67.5°, 112.5°, 157.5°, 202.5°, 247.5°, 292.5° and 337.5°,
- And it goes on like this until all frames are queued.
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 .data("images")
).
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?
from reel.
... and for those wanting to grab the code to test it themselves, it is being developed in a 10-preload-order branch.
from reel.
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.
from reel.
another question: now what if i was to load a 1x1px(base64 encoded inline image) image for the main and apply the jquery reel on it with a different set of images. would it load eaven faster?
from reel.
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 images
sequence array of base64 encoded images would sure be a blast.
from reel.
As a part of this issue a new preload
option has been added accepting a preloading mode name String:
"linear"
- the one going one by one from frame one till the end."fidelity"
- the new one - lo-fi growing to hi-fi
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 $.reel.preload
object. Let's say your new mode will be called "my_preload"
:
$.reel.preload.my_preload = function( sequence, options, get ){
/*
Actions performed to reorder the linear input sequence
*/
return sequence;
}
For the mode to be used, you then set the preload
option to "my_preload"
:
$('#my_image').reel({
preload: "my_preload"
});
Pull requests with better preloading orders will be warmly welcome! ;)
from reel.
nice, than you man :) gonna go implement the new version right away
from reel.
Glad you like it. Merging it into development.
from reel.
Related Issues (20)
- Dragging within a range of sequence
- Reel.js is not working in Chrome when add next and previous button.
- data-loops = 'false' does not work on rows
- possibility to ude it merging some images to compose the shown one
- touch support HOT 1
- Reach event rotates one frame backwards before rotating correctly
- python
- sensitivity on touch movement
- responsive and Ajax - In russian is love)))
- Jquery reel larger than container
- how to stop image cache
- Dimension(s) of the target image unknown Ab HOT 3
- ReferenceError: jQuery is not defined
- Image Request Loop Issue HOT 3
- Using reel js object animated by a slider (jquery ui) inside a book of moodle. It doesn't work
- Not working properly on mobile Safari? HOT 8
- 360 spinner doesn't work well on mobile HOT 6
- Chrome: Jerky or not smooth scrolling if it is placed at about 3000px or below in height
- Implement in Vuejs
- Uncaught TypeError: Cannot use 'in' operator to search for 'length' in 50, latest JQuery jquery.min-3.6.0.js not working
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reel.