CSS-Tricks / MovingBoxes

Simple horizontal slider which grows up the current box when it's in focus (image, title & text) and back down when it's not in focus.
http://css-tricks.github.io/MovingBoxes/
GNU Lesser General Public License v3.0
280 stars 147 forks source link

initialized function problem #92

Closed prootrash closed 12 years ago

prootrash commented 12 years ago

Hello,

I using Your script on my e-shop page for display products photos. I dynamically generating 'slider' content and have a sporadic problem with slider functionality. When I try load more than 3-4 photos (each photo is ~ 120KB), sometimes script doesn't run 'initialized' function. After this, left and right buttons doesn't work, only navigation dots changes my photos. When I reload page - everything working perfect. I think this is because something working wrong at photo loading time... When photos are downloaded from server and cached in web browser, I reload page and everything working correct.

prootrash commented 12 years ago

I placed lines:

base.initialized = true;
base.$el.trigger( 'initialized.movingBoxes', [ base, base.curPanel ] );

outside:

base.change(base.curPanel, function(){

}

and now everything working very well...

My modification:

setTimeout(function(){
                base.update(false);
                base.initialized = true;
                base.$el.trigger( 'initialized.movingBoxes', [ base, base.curPanel ] );

                base.change(base.curPanel, function(){
                    // do nothing :P
                }, false);
            }, o.speed * 2 );
Mottie commented 12 years ago

Thanks for taking the time to figure out the problem and working out a fix, but the two lines were within the change callback because of triggered events showing up before the plugin was initialized. I'll look into fixing this when I have some more time.

Thanks!

visualjazz-snolan commented 12 years ago

The code has a race condition in which the update call within the window load handler (line 60) kills the the animation call on line 356 (the animation complete function triggers the initialized event).

Moving the setTimeout code to under the update function will fix the issue like below.

$(window).load(function(){ // animate height after all images load
    base.update();

    // animate to chosen start panel - starting from the first panel makes it look better
    setTimeout(function(){
        base.change(base.curPanel, function(){
            base.initialized = true;
            base.$el.trigger( 'initialized.movingBoxes', [ base, base.curPanel ] );
        });
    }, o.speed * 2 );               
});
Mottie commented 12 years ago

@visualjazz-snolan Thanks! I'll try to get this fixed in the next update (not sure when I'll get a chance, sorry).

Mottie commented 12 years ago

Fixed in version 2.3. I ended up including some code to check when all images are loaded instead of using window load.