1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    1
    Vote Rating
    0
    settinghead is on a distinguished road

      0  

    Default Unanswered: Dynamic, infinite carousel does not load all pictures in Android 2.2-2.3

    Unanswered: Dynamic, infinite carousel does not load all pictures in Android 2.2-2.3


    This problem has been troubling me for a while and I haven't found what the cause is yet. Basically, I'm developing an infinite carousel that displays an infinite number of items (gags). Each item is defined by an HTML template with div and img tags (with no more than 3 img tags for each item).

    The carousel uses a "sliding window" approach where it has a maximum of 5 items at any given time. Say if the current active item is the third item, when the user swipes to the next item, it automatically loads the 6th item and the first item is removed. Here is the code for carousel's ActiveItemChange event:

    Code:
    onCarouselActiveItemChange function(container, value, oldValue, options){
    
    var me = this;
    var store = Ext.data.StoreManager.lookup('GagStore');
    
    
    
    
    this.getApplication().getHistory().add(new Ext.app.Action({
        url: 'tags/' + this.currentTag + '/gags/'+value.getData().getId()
    }), true);
    
    
    var halfw = Math.floor(TwoTwo.app.slidingWindowSize/2);
    
    
    window.gagId = value.getData().getId();
    
    //storeIndex is the current index among all items in the store
    if(container.storeIndex === undefined){
        container.storeIndex = 0;
        container.previousActiveIndex = 0;
    
    
    }
    if(container.previousActiveIndex === undefined)
    container.previousActiveIndex = 0;
    
    
    if(container.previousActiveIndex<container.getActiveIndex()){
        container.storeIndex++;
        if(store.getCount()-container.storeIndex>halfw && container.getItems().length-container.getActiveIndex()<halfw+1){
            me.getCarousel().add({
                xtype: 'gagitem',
                data: store.getAt(container.storeIndex+halfw),
                flex: 1
            });
            me.getCarousel().removeAt(0);
        }
    }
    else if(container.previousActiveIndex>container.getActiveIndex()){
        container.storeIndex--;
    
    
        if(container.storeIndex>=halfw+1 && container.getActiveIndex()<halfw){
            me.getCarousel().insert(0, {
                xtype: 'gagitem',
                data: store.getAt(container.storeIndex-halfw),
                flex: 1
            });
            me.getCarousel().removeAt(me.getCarousel().getItems().length-1);
        }
    }
    var gag = store.getAt(container.storeIndex);
    
    
    container.previousActiveIndex = container.getActiveIndex();
    
    
    //auto load next batch of items when reaching towards the end
    if(container.storeIndex+halfw == store.getCount()-halfw){
        params = store.getProxy().getExtraParams();
        params.before = store.getAt(store.getCount()-1).get('created_at');
        store.getProxy().setExtraParams(params);
        store.loadPage(1, {
            callback: function(gags, operation, success) {
    
    
            },
            scope: this
        });
    }
    
    
    }
    Code for item:

    Code:
    Ext.define('TwoTwo.view.GagItem', {
        extend: 'Ext.Container',
        alias: 'widget.gagitem',
        requires: [
            'TwoTwo.view.GagImages'
        ],
    
    
        config: {
            baseCls: 'gag-item',
            ui: 'light',
            layout: {
                type: 'vbox'
            },
            scrollable: false,
            items: [
                {
                    xtype: 'label',
                    cls: [
                        'title-bar'
                    ],
                    hidden: true,
                    tpl: [
                        '{title}'
                    ]
                },
                {
                    xtype: 'gagimages',
                    hidden: true,
                    flex: 1
                }
            ],
            listeners: [
                {
                    fn: 'onContainerUpdatedata',
                    event: 'updatedata'
                },
                {
                    fn: 'onContainerInitialize',
                    event: 'initialize'
                }
            ]
        },
    
    
        onContainerUpdatedata: function(component, newData, options) {
                this.setHtml(newData.get('html'));
        }
    
    
    });
    The code works fine on iOS 5.0 and Android 4.1, but it usually fails to load any images after I've swiped through 5 or 6 items (sometimes 10-12 items, webview doesn't seem to send a request to the image server at all when there is an img tag in the item, however the text part of the items renders fine on the screen).


    Any help would be appreciated. Thanks!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Did you inspect the DOM to see if the image element is created?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread