Skip to content

initialized function problem #92

Closed

Description

@prootrash

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.

Activity

  1. prootrash commented on Aug 27, 2012

    @prootrash
    Author

    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 );
  2. Mottie commented on Aug 29, 2012

    @Mottie
    Contributor

    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!

  3. visualjazz-snolan commented on Sep 4, 2012

    @visualjazz-snolan

    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 );               
    });
  4. Mottie commented on Sep 5, 2012

    @Mottie
    Contributor

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

  5. Mottie commented on Sep 18, 2012

    @Mottie
    Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions