How to optimize ListView contents


#1

it seems that whenever I navigate through a page with loads of listview content, it loads the contents before navigating.

heres a snippet of my codes:
JS

exports.onLoaded = function(args) {
    var items = [];
    items.push(
    {
        image: "~/images/org_logo/ssc.png",
        text: "",
        color: "#000",
        org: "SSC"
    },
    {
        image: "~/images/org_logo/scea.jpg",
        text: "",
        color: "#590004",
        org: "SCEA"
    },
    {
        image: "~/images/org_logo/scitc.jpg",
        text: "",
        color: "#000",
        org: "SCITC"
    },
    {
        image: "~/images/org_logo/scsm.jpg",
        text: "",
        color: "#01622f",
        org: "SCSM"
    },
    {
        image: "~/images/org_logo/sct.jpg",
        text: "",
        color: "#9e0001",
        org: "SCT"
    },
    {
        image: "~/images/org_logo/scste.jpg",
        text: "",
        color: "#190054",
        org: "SCSTE"
    },
    {
        image: "~/images/org_logo/faeso.png",
        text: "",
        color: "#000",
        org: "FAESO"
    }
    )
    var pages = args.object;
    var listview = view.getViewById(pages, "maplist");
    listview.items = items;
}

XML

<GridLayout class="page-content">
            <TabView class="Tabs" selectedIndexChanged="onSelectedIndexChanged">
                <TabView.items>


                    <TabViewItem title="Mother Orgs" class="TabTitle">
                        <TabViewItem.view>
                        <StackLayout backgroundColor="#e0e0e0">
            <lv:RadListView id="maplist">
                <lv:RadListView.listViewLayout>
                    <lv:ListViewGridLayout scrollDirection="Vertical" spanCount="2"/>
                </lv:RadListView.listViewLayout>
                <lv:RadListView.itemTemplate>
                <Card:CardView backgroundColor="white" radius="10" margin="5" col="0" elevation="10">
                    <GridLayout rows="120, auto" columns="*, *, *">
                        <image src="{{ image }}" backgroundColor="{{ color }}" stretch="aspectFit" colSpan="3" row="0" />
                        <Label text="{{ text }}" class="map-text" textWrap="true" colSpan="3" />
                        <button text="&#xE55F;" tap="orglocate" orgs="{{ org }}" class="Material info clear-btn gray" row="1" col="0" />
                        <button text="&#xe7fb;" tap="officerlist" orgs="{{ org }}" class="Material info clear-btn gray" row="1" col="1" />
                        <button text="&#xf230;" tap="orgUrl" orgs="{{ org }}" class="fa info clear-btn gray" row="1" col="2" />
                    </GridLayout>
                </Card:CardView>
                </lv:RadListView.itemTemplate>
            </lv:RadListView>

        </StackLayout>
                        </TabViewItem.view>
                    </TabViewItem>

                    <TabViewItem title="Unit Orgs" class="TabTitle">
                        <TabViewItem.view>
                            <unitorg:unitorg/>
                        </TabViewItem.view>
                    </TabViewItem>

                    <!--<TabViewItem title="Events" class="TabTitle">
                        <TabViewItem.view>
                            <events:events/>
                        </TabViewItem.view>
                    </TabViewItem>-->


                </TabView.items>
            </TabView>
            </GridLayout>

how do I optimize this to lessen response time?