Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-23126] iOS Device: Remote Images in ListView will not download until user stop scrolling

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionInvalid
Resolution Date2016-04-08T17:33:44.000+0000
Affected Version/sRelease 5.2.0, Release 5.2.1
Fix Version/sn/a
ComponentsiOS
LabelsListView, iOS
Reporter Ricardo Ramirez
AssigneeAngel Petkov
Created2016-03-30T22:39:26.000+0000
Updated2017-03-20T21:52:24.000+0000

Description

Issue description

Remote Images in ListView will not download until user stop scrolling.

Steps to Replicate

Create a new apcelerator default classic project

Open the app.js file

Replace the content with the next code:

///create component instance
    var win = Ti.UI.createWindow({
        backgroundColor : '#000',
        navBarHidden : false,
        layout : 'vertical'
    });
 
    var Template = {
        properties: {height: 40},
         events: {click: function(e) { 
         var item = e.section.getItemAt(e.itemIndex);
             var data = item.info.text;
        if(data=='Location services')
        {
        alert("you click Location services");
        }
         else if(data=="Lock Screen")
        {
        alert("you click Lock Screen");
        }
        else if(data=="Security")
        {
            alert("you click Security");
        }
        else
        {
            alert("you click Language");
        }
 
      }},
        childTemplates: [
        {
            type: 'Ti.UI.ImageView', // Use an image view for the image
            bindId: 'pic',           // Maps to a custom pic property of the item data
            properties: {            // Sets the image view  properties
                width: '50dp', height: '50dp', left: 10
            }
        },
 
        {                            // Subtitle
            type: 'Ti.UI.Label',     // Use a label for the subtitle
            bindId: 'info',       // Maps to a custom es_info property of the item data
            properties: {            // Sets the label properties
                color: 'gray',
                font: { fontFamily:'Arial', fontSize: '20dp' },
                left: '70dp',
            }
        }
    ]};
 
    var section = Ti.UI.createListSection({});
    var listView = Ti.UI.createListView({
        templates: { 'temp': Template},
        sections: [ section ]
    });
 
//Input data set here
 
    var data = [
    {template:'temp', properties:{height:40},pic: {image: 'http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX18_3.jpg'},info:{text:'Location services'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.customtablefelt.com/images/nhl-logo-100x100.jpg'},info:{text:'Lock Screen'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.clker.com/cliparts/R/S/Z/4/t/f/crossed-hammers-bw-100x100-md.png'},info:{text:'Security'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.ebooks-gratuit.com/images/avatars/Husky-Logo-100x100_full[7885].gif'},info:{text:'Language'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX18_3.jpg'},info:{text:'Location services'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.customtablefelt.com/images/nhl-logo-100x100.jpg'},info:{text:'Lock Screen'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.clker.com/cliparts/R/S/Z/4/t/f/crossed-hammers-bw-100x100-md.png'},info:{text:'Security'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.ebooks-gratuit.com/images/avatars/Husky-Logo-100x100_full[7885].gif'},info:{text:'Language'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX18_3.jpg'},info:{text:'Location services'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.customtablefelt.com/images/nhl-logo-100x100.jpg'},info:{text:'Lock Screen'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.clker.com/cliparts/R/S/Z/4/t/f/crossed-hammers-bw-100x100-md.png'},info:{text:'Security'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.ebooks-gratuit.com/images/avatars/Husky-Logo-100x100_full[7885].gif'},info:{text:'Language'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX18_3.jpg'},info:{text:'Location services'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.customtablefelt.com/images/nhl-logo-100x100.jpg'},info:{text:'Lock Screen'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.clker.com/cliparts/R/S/Z/4/t/f/crossed-hammers-bw-100x100-md.png'},info:{text:'Security'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.ebooks-gratuit.com/images/avatars/Husky-Logo-100x100_full[7885].gif'},info:{text:'Language'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX18_3.jpg'},info:{text:'Location services'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.customtablefelt.com/images/nhl-logo-100x100.jpg'},info:{text:'Lock Screen'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.clker.com/cliparts/R/S/Z/4/t/f/crossed-hammers-bw-100x100-md.png'},info:{text:'Security'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.ebooks-gratuit.com/images/avatars/Husky-Logo-100x100_full[7885].gif'},info:{text:'Language'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://media.sdfirealarms.co.uk/media/catalog/product/cache/6/image/500x500/fbcb73186cd05db6dad7b3600e4e2dc4/F/E/FEX18_3.jpg'},info:{text:'Location services'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.customtablefelt.com/images/nhl-logo-100x100.jpg'},info:{text:'Lock Screen'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.clker.com/cliparts/R/S/Z/4/t/f/crossed-hammers-bw-100x100-md.png'},info:{text:'Security'}},
    {template:'temp', properties:{height:40},pic: {image: 'http://www.ebooks-gratuit.com/images/avatars/Husky-Logo-100x100_full[7885].gif'},info:{text:'Language'}}, 
 
    ];
 
    section.setItems(data);
 
    win.add(listView);
 
    win.open();

Run for simulator or device

Star to scroll before the Images are downloaded

Once you finish the scroll the images are loaded

Expected behavior

The images should be downloaded at the same time the user is scrolling

Comments

  1. Angel Petkov 2016-03-30

    This is actually the intended behavior , we changed the behavior a couple of releases back. The idea is that we only load images that can be seen by the user for better performance. Ones the scrollVIew has finished scrolling it will get all the fields are currently visible and load the images if need be.
  2. Angel Petkov 2016-04-08

    You can disable this by setting the following [property](http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ListView-property-lazyLoadingEnabled) to false. Which will load images while scrolling :)! Closing ticket as invalid.
  3. Lee Morris 2017-03-20

    Closing ticket as invalid.

JSON Source