[TIMOB-19036] iOS: Remote ImageViews not loading while scrolling ListView

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Duplicate
Resolution Date	2015-10-22T20:55:06.000+0000
Affected Version/s	n/a
Fix Version/s	Release 5.1.0
Components	iOS
Labels	n/a
Reporter	David Fox
Assignee	Hans Knöchel
Created	2015-05-23T05:12:17.000+0000
Updated	2015-11-02T19:47:39.000+0000

Description

As of this version (4.0.1) on iOS, when scrolling through a ListView that contains ImageViews that use remote images, the images are not loaded until the scrolling of the ListView comes to a complete stop. Running the same project with 3.5.1 yields the expected result where the ImageViews get loaded as you scroll through the list.

Comments

David Fox 2015-05-23

After looking at this further, a lot of times the images don't even load at all unless you play with the scrolling, meaning you scroll past the rows, then go back and stop.
Amimul Hossain 2015-05-24

Hello, I have tested this issue with SDK 4.0.0.RC5, with new Appcelerator Studio build: 4.0.1.201505170721. I wasn't able to regenerate the issue. Simple listview with imageview in templates with list section where the image is remote image seems to work fine in iOS. Please provide the test case, so we can regenerate the issue. Thanks.
David Fox 2015-06-12

Hi Amimul, Sorry I haven't gotten around to providing a test case yet. My project is pretty large so abstracting the list in question is a little difficult. I just tested with a continuous build (4.1.0) and the issue is still present. I'll try to get you a test case soon, but in the meantime, I wanted to provide you the template in question. It's pretty complex so I'm thinking maybe the issue is something with what the image is actually in. To re-itterate, the images with bindId "pic" load in a very weird/broken pattern under any SDK above 3.5.1. On 4.0.0 and 4.1.0 the images don't get loaded while scrolling and you need to come to a complete stop, and even then sometimes you need to fidget with the scrolling to get them to load. Template: {noformat} var template = { childTemplates: [ { type: "Ti.UI.View", properties: { width: "100%", height: Ti.UI.SIZE, layout: "horizontal", horizontalWrap: false, top: "8dip", left: "10dip" }, childTemplates: [ { type: "Ti.UI.View", properties: { width: 50, height: 50, }, childTemplates: [ { type: 'Ti.UI.ImageView', bindId: 'pic', properties: { width: 50, height: 50, borderRadius: 25, preventDefaultImage: true } }, { type: 'Ti.UI.View', bindId: 'whiteCircle', properties: { width: 16, height: 16, borderRadius: 8, backgroundColor: "#fff", top: 0, right: 0, visible: false } }, { type: 'Ti.UI.Label', bindId: 'readCheck', properties: { top: 1, left: -1, textAlign: Titanium.UI.TEXT_ALIGNMENT_RIGHT, width: "100%", height: Ti.UI.SIZE, text: "\uE60E", color: "#aaaab8", font: { fontFamily : "icomoon", fontSize: 14 }, visible: false } } ] }, { type: "Ti.UI.View", properties: { top: 0, width: Ti.App.realWidth - 73, height: Ti.UI.SIZE, layout: "vertical", left: 10 }, childTemplates: [ { type: "Ti.UI.Label", bindId: "title", properties: { top: 3, left: 0, bottom: 3, width: Ti.App.realWidth - 83, height: Ti.UI.SIZE, color: "#000", font: { fontFamily: "Helvetica Neue", fontWeight: "bold" } } }, { type: "Ti.UI.View", properties: { width: Ti.UI.FILL, height: Ti.UI.SIZE }, childTemplates: [ { type: "Ti.UI.Label", bindId: "source", properties: { top: 0, left: 0, bottom: 11, color: "#aaaab8", width: Ti.UI.SIZE, height: Ti.UI.SIZE, font: { fontFamily: "Helvetica Neue", fontSize: 12 } } }, { type: "Ti.UI.Label", bindId: "timestamp", properties: { top: 0, right: 12, bottom: 11, color: "#aaaab8", text: "12m", width: Ti.UI.SIZE, height: Ti.UI.SIZE, font: { fontFamily: "Helvetica Neue", fontSize: 12 } } }, ] } ] } ] } ] }; {noformat}

Amimul Hossain 2015-06-16

Hello, I have created a sample code to work with listview with Template with remote image, it seems to work fine with SDK 4.0.0.GA. The only issue i saw in iOS is it depends on the internet speed to download the images. so thats why it seem lagging to load the images.

CODE SAMPLE

   var win = Ti.UI.createWindow({backgroundColor: 'white'});
   
   // Create a custom template that displays an image on the left, 
   // then a title next to it with a subtitle below it.
   var myTemplate = {
   	properties: {            // Sets the image view  properties
                    height: '250dp'
                   },
       childTemplates: [
           {                            // Image justified left
               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: Ti.UI.FILL, height: Ti.UI.FILL,
               }
           },
       ]
   };
   
   var listView = Ti.UI.createListView({
       // Maps myTemplate dictionary to 'template' string
       templates: { 'template': myTemplate },
       // Use 'template', that is, the myTemplate dict created earlier
       // for all items as long as the template property is not defined for an item.
       defaultItemTemplate: 'template'
   });
   var sections = [];
   
   var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits / Frutas'});
   var fruitDataSet = [
   
       { pic: {image: 'https://www.leuchtturm.com/WebRoot/Store/Shops/leuchtturm_eu/Products_bild2/hmetui23.jpg'}},
       { pic: {image: 'http://orig08.deviantart.net/24c1/f/2009/238/d/8/small_50x50__png_clock_pic_by_counter_countdown_ip.png'}},    
       { pic: {image: 'http://www.clker.com/cliparts/l/u/5/P/D/A/arrow-50x50-md.png'}},
       { pic: {image: 'http://www.strongteak.com/images/kecil/edy_4f62291d967a52ac0ed9619c6aeda35f.jpg'}},    
       { pic: {image: 'https://thingiverse-production-new.s3.amazonaws.com/renders/16/04/2d/b5/ed/smiley_face_thumb_small.jpg'}},
       { pic: {image: 'http://www.avissasalon.com/wp-content/uploads/2013/08/facebook-logo-small-50x50.jpg'}},    
       { pic: {image: 'http://cdn2.hubspot.net/hub/32387/file-13762988-png/images/linkedin-logo-landing-page.png'}},
       { pic: {image: 'http://www.southfieldlibrary.org/wp-content/uploads/2010/03/growing-money-small.jpg'}},    
       { pic: {image: 'http://love-invincible.com/wp-content/uploads/2014/06/LI-NEW-500x500.png'}},
       { pic: {image: 'http://www.strima.com/image/1026241/p/1/HOOP-SMALL-JANOME-Hoop-small-50x50-mm-for-JANOME-MEMORY-CRAFT-200E.jpg'}},    
       { pic: {image: 'https://www.leuchtturm.com/WebRoot/Store/Shops/leuchtturm_eu//Products//hmetui23.jpg'}},
       { pic: {image: 'http://www.laplandhouse.com/res/default/sittdynabc12_small.jpg'}},    
       { pic: {image: 'http://carstenknoch.com/wp-content/uploads/2012/12/iTunes10-icon-small.png'}},
       { pic: {image: 'http://dogcitydaycare.com.au/wp-content/uploads/2012/01/Pup-small.jpg'}},    
       { pic: {image: 'http://www.olanderswim.se/shop/17794/art94/h6865/5326865-origpic-c902c9.jpg'}},
       { pic: {image: 'http://www.angmarmedical.com/wp-content/uploads/2013/06/Pinterest-Logo-Vector-by-Jon-Bennallick-02-300x300.png'}},    
       { pic: {image: 'http://www.mimou.se/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/c/u/cu050.jpg'}},
       { pic: {image: 'http://pizzainmotion.img.boardingarea.com/wp-content/uploads/2014/11/facebook-icon-50x50.jpg'}},    
       { pic: {image: 'http://files.jimeh.me/.blog/jimeh_2.0_large-20100205-042205.jpg'}},
       { pic: {image: 'http://www.avatarswizard.com/uploads/av/2010-01/thumbs/100x100_1263466725_100x100_1234342881_small_avatars_naruto_0151.jpg.jpg'}},    
       { pic: {image: 'http://www.fmwconcepts.com/misc_tests/normcrosscorr_tests/wizardsq.png'}},
       { pic: {image: 'http://www3.ipc.org.es/guia_colocacion/info_tec_colocacion/mat_agarre/adherencia/medida/parrafos/00/imageMax1/image/propamsa1.jpg'}},    
       { pic: {image: 'http://dogcitydaycare.com.au/wp-content/uploads/2011/11/Brown-lab-small-200x245.jpg'}},
       { pic: {image: 'http://files.jimeh.me/.blog/jimeh_1.0_large-20100205-042133.jpg'}},    
       { pic: {image: 'http://www.narrowbandimaging.com/images/rosette_ap155edf_f7_FF_PL39KM_ChromaHa_7x10min.jpg'}},
       { pic: {image: 'http://eng.boulychev-art.com/files/images/smalldifficulties50x50cm.jpg'}},    
       { pic: {image: 'http://img03.taobaocdn.com/bao/uploaded/i3/498594120/T2P2OwXdNXXXXXXXXX_!!498594120.jpg'}},
       { pic: {image: 'http://www.mir.com/DMG/Software/CmpImgs/square-200x200.pgm.png'}},    
       { pic: {image: 'http://globalcardiacrehab.com/wp-content/uploads/Chinese-CR-logo-small-size.jpg'}},
       { pic: {image: 'https://www.kickball.com/files/resize/league/184840/facebook_icon_small_png_4aabf4af53-50x50.png'}},    
       { pic: {image: 'http://image.architonic.com/img_pro2-1/113/7526/Droppe-stor-sv-50-50-b.jpg'}},
       { pic: {image: 'http://www.writebynight.net/wp-content/uploads/2011/03/Twitter-icon.jpg'}},    
       { pic: {image: 'http://love-invincible.com/wp-content/uploads/2014/05/Icon-Heart-SLIDER-SMALL.jpg'}},
       { pic: {image: 'http://img.diytrade.com/smimg/625512/4916181-260100-0/nn/a55.jpg'}},    
       { pic: {image: 'http://www.tecninovainteriors.com/438-productlist/25011-small-cusion-40x40-col-countryside.jpg'}},
       { pic: {image: 'http://www.tecninovainteriors.com/464-productlist/25025-small-cushion-50x50-col-countryside.jpg'}},    
       { pic: {image: 'http://www.furniturepalacekenya.com/image/cache/data/Sofitalia/Gemona-03%20Small-650x650.jpg'}},
       { pic: {image: 'http://www.kauffmancenter.org/wp-content/uploads/smaller-right-fixed-more-space-50x50.jpg'}},    
       { pic: {image: 'http://www.mumsintheknow.co.uk/bramhall/wp-content/uploads/2013/06/Love-Sweat-Logo-small-300x199.jpg'}},
       { pic: {image: 'http://www.avissasalon.com/wp-content/uploads/2013/08/facebook-logo-small-50x50.jpg'}},    
       { pic: {image: 'http://img02.taobaocdn.com/bao/uploaded/i2/T162G2Xb4kXXcrBfo9_103316.jpg'}},
       { pic: {image: 'https://ms-tw.s3.amazonaws.com/variant_image/3078/full_0s6o961q5q1e0c5y.jpg'}},    
       { pic: {image: 'http://www.mobilevillage.com/wp-content/uploads/2013/03/Android-evil-small.jpg'}},
       { pic: {image: 'https://ms-tw.s3.amazonaws.com/variant_image/3080/full_0s6o964o6q1o5l4n.jpg'}},    
       { pic: {image: 'http://www.antiqueandcontemporaryartgallery.com/images/SmallWindows.jpg'}},
       { pic: {image: 'http://a142.idata.over-blog.com/0/08/04/72/portrait/F-line-web.jpg'}},    
       { pic: {image: 'http://www.cross-point.com/imagesProducts/soumak/soac,-sosm04,tasm01.jpg'}},
       { pic: {image: 'http://closummitindia.com/wp-content/uploads/2012/04/iStock_000012676792Small-512x300.jpg'}},    
       { pic: {image: 'http://subud.org/iscmedia/buttons/SymbolBlueXL.png'}},
       { pic: {image: 'http://assets.loeildelaphotographie.com/uploads/article_photo/image/22937/Sokolsky_LipStreaks_HiRes_small.jpg'}},    
       { pic: {image: 'http://www.teleskop-express.de/shop/Bilder/shop/Yukon/model_yukon_20-50x50_wa.jpg'}},
       { pic: {image: 'http://www.farmhouseshop.se/shop/12608/art8/h6032/10386032-origpic-f0ae25.jpg'}},    
       { pic: {image: 'http://www.mimou.se/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/c/u/cu853.jpg'}},
       { pic: {image: 'https://upload.wikimedia.org/wikipedia/en/9/97/Fangoria_Skull_Small.png'}},
   ];
   fruitSection.setItems(fruitDataSet);
   sections.push(fruitSection);
   
   
   listView.setSections(sections);
   win.add(listView);
   win.open();

Thanks.

Arjan 2015-06-17

I am also experiencing this issue. Made 2 screencasts: 3.5.1.GA : https://www.youtube.com/watch?v=W_YgY4jChLY&feature=youtu.be 4.0.0.GA / 4.1.X : https://www.youtube.com/watch?v=zpeiE_q8ZyU&feature=youtu.be
David Fox 2015-06-17

Amimul - thanks for trying to reproduce. I'm thinking this issue gets caused by a more complex listview somehow (see my above listview template) Arjan - thanks for reproducing and taking these videos! These perfectly show the same issue I'm experiencing too. I can take a screen capture too, if that would help, but it would look very similar to Arjan's. Please let us know what you need.
Arjan 2015-06-17

David, I think I found the cause and solution, thanks to some help on the new ti.slack channel. Apparently, the listView has changed in 4.XX: https://github.com/appcelerator/titanium_mobile/commit/1d55715a0f3976ac01e1aef17398e35b165bdd84 A comment on slack: {quote}cdr [3:40 PM] that commit looks wrong, i think it should also resume the ImageLoader on scrollViewDidEndDragging because scrollViewDidEndDecelerating isn't always called cdr [3:40 PM] you can see in your video that it works if you don't "flick" (scroll) the list, if you just drag and never release the images load cdr [3:41 PM] like Ti.UI.ScrollView has dragEnd and scrollEnd{quote} Solution (thanks to ludolphus): - edit ~/Library/Application Support/Titanium/mobilesdk/osx/4.0.0.GA/iphone/Classes/TiUIListView.m - look for scrollViewDidEndDragging - add : [[ImageLoader sharedLoader] resume]; Now the images will load directly again, instead of after releasing the listview. Maybe appcelerator should build in a option/argument for the listView so we can choose which method to use for loading images (directly or after releasing/ending scroll).
David Fox 2015-06-17

Great find!! Thank you for posting this, I really appreciate it. An option would be good. If no option, then it seems the old behavior is much preferable.
Ingo Muschenetz 2015-10-12

[~egomez] What is their rationale for that choice?
Hans Knöchel 2015-10-22

Resolving as duplicate of TIMOB-19647, please check the related PR to verify, that the issue is now fixed.
Eric Merriman 2015-11-02

Closing as duplicate.

JSON Source