I'm using the new velocity option to give my objects an initial 360 spin. I've fiddled with the velocity and brake numbers so that each object goes for a perfect 360 when the page initially loads. (This is a great UI feature, because it indicates the functionality of the plug-in, without going on and on in a blinking, annoying way.) Basically, it's awesome. You can see the working page here:
http://bit.ly/Psprn8
It works nicely, especially in Webkit. Here's the basic idea: when the user clicks a new vase thumbnail to load it onto the "main stage":
a) all images of the class reel-cached get removed from the DOM.
b) the "main" img gets faded out
c) as a callback, the img then gets "unreeled"
d) the image's src gets swapped out with a new src
e) the new image gets faded back in, and
f) as a callback, reel is called on the new img.
Once all the images have all been cached then the transitions between the vases are all fairly smooth. The big problem, however, is that the initial velocity is getting kicked off before the "loading" is complete. Chrome is fast enough that this isn't such a problem, but it hurts to watch this in Firefox. My "complete rotation" in chrome turns into some weird jitter that doesn't fully complete. It's slightly different every time I clear the cache and reload. Ach!
It's clear to me that the preloader progress bar refers not to the images being in the browser cache (the conventional meaning of the word), but to the actual imgs having been loaded into the DOM with display: none. That makes sense.
But it's visually weird that my blue preloader box seems to be effectively synched with the twirl of the vase. What I want is to have the preloader complete, and then twirl the vase, fluidly. I realize you've put a ton of thought into performance, and not holding up basic functionality on slower machines, but I'd rather make the user wait a little and show them something reasonably smooth than kick off an animation that just isn't ready. Is there some happy compromise solution here?
P.S. While I'm here (and you're here, dear reader) there is another weird problem in Firefox, too, that is not really a problem with the plugin but I thought I'd ask anyways :) At step (e) above, when the new image is fading in, for a moment it's actually the old image, which then abruptly gets swapped out. It's weird. I'm trying to be all smooth with the transitions in my jQuery, and I think I'm using callbacks properly, but Gecko is effectively messing with my event sequence. Any idea how to work around this?
Thanks so much!
I'm using the new
velocityoption to give my objects an initial 360 spin. I've fiddled with thevelocityandbrakenumbers so that each object goes for a perfect 360 when the page initially loads. (This is a great UI feature, because it indicates the functionality of the plug-in, without going on and on in a blinking, annoying way.) Basically, it's awesome. You can see the working page here:http://bit.ly/Psprn8
It works nicely, especially in Webkit. Here's the basic idea: when the user clicks a new vase thumbnail to load it onto the "main stage":
a) all images of the class
reel-cachedget removed from the DOM.b) the "main" img gets faded out
c) as a callback, the img then gets "unreeled"
d) the image's src gets swapped out with a new src
e) the new image gets faded back in, and
f) as a callback, reel is called on the new img.
Once all the images have all been cached then the transitions between the vases are all fairly smooth. The big problem, however, is that the initial
velocityis getting kicked off before the "loading" is complete. Chrome is fast enough that this isn't such a problem, but it hurts to watch this in Firefox. My "complete rotation" in chrome turns into some weird jitter that doesn't fully complete. It's slightly different every time I clear the cache and reload. Ach!It's clear to me that the
preloaderprogress bar refers not to the images being in the browser cache (the conventional meaning of the word), but to the actual imgs having been loaded into the DOM withdisplay: none. That makes sense.But it's visually weird that my blue preloader box seems to be effectively synched with the twirl of the vase. What I want is to have the preloader complete, and then twirl the vase, fluidly. I realize you've put a ton of thought into performance, and not holding up basic functionality on slower machines, but I'd rather make the user wait a little and show them something reasonably smooth than kick off an animation that just isn't ready. Is there some happy compromise solution here?
P.S. While I'm here (and you're here, dear reader) there is another weird problem in Firefox, too, that is not really a problem with the plugin but I thought I'd ask anyways :) At step (e) above, when the new image is fading in, for a moment it's actually the old image, which then abruptly gets swapped out. It's weird. I'm trying to be all smooth with the transitions in my jQuery, and I think I'm using callbacks properly, but Gecko is effectively messing with my event sequence. Any idea how to work around this?
Thanks so much!