list images rendering safari issue

Hello,

I am using sencha touch 2.3.1 version.

I have one demo application which shows list of team members for that I am using list with images and some contents of team members.I have also used ListPaging plugin to load more data from server side.

It's working properly in android chrome but when I run this application in ios 7.1 safari browser and start loading more data with list paging plugin, images which are already rendered are reloading again.

example : when I start app, it loads 10 team members with their respective images after that I scroll to the end of list and click on load more text to load another 10 team members but when these data load into the store, images of first 10 team members are loading again.

Here is my code:

Code:

onReady: function() {
           Ext.define('TeamStore', {
            extend: 'Ext.data.Store',


            config: {
                fields: ['user', 'profileImageUrl'],
                queryMode: 'local',
                pageSize: 10,
                autoLoad:true,
                clearOnPageLoad:false,
                proxy: {
                    type: 'rest',
                    url: 'localhost:3000/GetTeam'
                }
            }
        });


        Ext.define('TeamList', {
            extend: 'Ext.List',


            config: {
                useSimpleItems: false,
                variableHeights: true,
                infinite: true,
                disableSelection: true,
                allowDeselect: false,
                scrollToTopOnRefresh: false,
                store: Ext.create('TeamStore'),


                plugins: [
                    { xclass: 'Ext.plugin.ListPaging' }
                ],


                itemTpl: Ext.create('Ext.XTemplate',
                    '<div class="team">',
                    '<img src="{profileImageUrl}" />',
                    '<div class="teammember">',
                    '<h2>@{user}</h2>',
                    '</div>'
                )
            }
        });


        if (Ext.os.is.Phone) {
            Ext.create('TeamList', {
                fullscreen: true
            });
        } else {
            Ext.Viewport.add({
                xclass: 'TeamList',
                width: 380,
                height: 420,
                centered: true,
                modal: true,
                hideOnMaskTap: false
            }).show();
        }
    }

I dig into this problem and I found that problem is with XTemplate. When I add, update or remove data from the store which is bound to list, XTemplate has been rendered again. So img tag fetches image from URL again.

I have also seen same behaviour into pull refresh example(Tweet Example) given with sencha touch sdk.

here is the link: (ios Safari)

http://ift.tt/1qY7xfP

Am I making any mistake or this is default behaviour of XTemplate??

Every time it fetches images from server if it is a default behaviour. It's a problem.

Please provide me with a solution.

Thanks.

list images rendering safari issue