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

[settinghead]

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:

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:

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!

[mitchellsimoens]

Did you inspect the DOM to see if the image element is created?