On Wed, 15 Aug 2007 15:20:17 -0700, "Erik Beeson" <[EMAIL PROTECTED]> wrote:
> What I'm saying is, window.load is like your "reallydone". It happens after
> all of the document.ready stuff is done. I suggest you do all of your
> hooking up stuff in document.ready, and do the animations in window.load.
> You can keep content from flashing by hiding it in a document.ready, or
> even
> better, just hide it with CSS.
CSS hiding isn't an option because it has to degrade gracefully. I'm also
trying to avoid splitting each effect up in to multiple pieces, for
maintainability. (The functionality keeps changing on some of them. Yay
clients!)
I'll see what happens if I use window.load for one or the other, though.
> If you really want to do your hooking up stuff after the animation, I
> suggest you just use an animation callback. You can still define stuff in
> separate files:
>
> hookerUper.js:
> function doHookUpStuff() {
> ....
> }
>
> introAnimations.js:
> $(...).animate(..., doHookUpStuff);
>
> --Erik
Right, that's what I'm suggesting doing. Only doHookUpStuff() would just
contain a trigger for the other event, because I can't easily merge all of the
hook up into one function.
--Larry Garfield
>
>
> On 8/15/07, Larry Garfield <[EMAIL PROTECTED]> wrote:
>>
>>
>>
>> Well, they start by hiding various page elements and then fading them
> back
>> in, sometimes in weird ways. So I need the hiding part to happen as
> soon as
>> possible so that there's no "flicker of content". document.ready()
> hasn't
>> caused me any problems in that regard so far when the animations are the
>> only thing on the page. That's what leads me to think that it's a sync
>> issue with all the other code that's now running.
>>
>> --Larry Garfield
>>
>> On Wed, 15 Aug 2007 14:56:50 -0700, "Erik Beeson"
> <[EMAIL PROTECTED]>
>> wrote:
>> > You might try moving your opening animations to
>> $(window).load(function()
>> > {...});
>> >
>> > --Erik
>> >
>> >
>> > On 8/15/07, Larry Garfield <[EMAIL PROTECTED]> wrote:
>> >>
>> >>
>> >>
>> >> Good <insert time of day here> jQuery.
>> >>
>> >> I have a site where I have a series of animations that need to run on
>> >> load. I also have a large number of other events that happen on load
>> to
>> >> setup various other effects and animations and modal popups and other
>> >> goodness. Individually, I have all of them working (yay!). However,
>> > when I
>> >> put them all together in the page the opening animation is very herky
>> > jerky
>> >> (boo!). I'm assuming that's because the animation happens on ticks,
>> and
>> >> ticks are delayed by other non-trivial hookup functions that are
>> running
>> > on
>> >> $(document).ready(). So I'm having, essentially, thread sync issues
>> > (yay!).
>> >>
>> >> Since none of the other hookup functions really *have* to happen
>> >> immediately, but could happen after the opening animation (presumably
>> no
>> > one
>> >> is going to be clicking on links while parts of the page are still
>> > fading
>> >> in), my thinking is to simply have the hookups not fire on
>> > document.readybut on
>> >> animation.complete. They're all residing in different files,
> however,
>> > and
>> >> merging everything into one big script would be a huge hassle as well
>> as
>> >> much more brittle code. I also want to keep it modular so that I
> don't
>> > have
>> >> to hard-code every init function into the animation routines.
>> >>
>> >> Sooo...
>> >>
>> >> My plan at this point is to introduce a new event,
>> >> document.animationIsDoneSoPageIsReallyReady (or something less silly
>> >> sounding), and have the other hookups fire on that event instead. So
>> > the
>> >> code would look like:
>> >>
>> >> $(document).ready(function() {
>> >> // Do animation stuff here.
>> >>
>> >> $(document).trigger('reallydone');
>> >> });
>> >>
>> >> // in another file
>> >> $(document).bind('reallydone', function() {
>> >> // Hook up jqModal.
>> >> });
>> >>
>> >> // in another file
>> >> $(document).bind('reallydone', function() {
>> >> // Hook up a different jqModal.
>> >> });
>> >>
>> >> // in another file
>> >> $(document).bind('reallydone', function() {
>> >> // Hook up some scrolling effects and other weirdness.
>> >> });
>> >>
>> >> So my questions to the audience are:
>> >>
>> >> 1) Is my analysis of the problem correct?
>> >>
>> >> 2) Is this a reasonable way to go about solving it?
>> >>
>> >> 3) Is my code sample above somewhat vaguely accurate?
>> >>
>> >> 4) Any suggestions or gotchas that could save me some hair? :-)
>> >>
>> >> Many thanks.
>> >>
>> >> --Larry Garfield
