{ "id": "89707", "key": "TIMOB-8614", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "10153", "key": "TIMOB", "name": "Titanium SDK/CLI", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [], "resolution": { "id": "1", "description": "A fix for this issue is checked into the tree and tested.", "name": "Fixed" }, "resolutiondate": "2012-04-16T15:36:04.000+0000", "created": "2012-04-09T10:36:23.000+0000", "priority": { "name": "High", "id": "2" }, "labels": [ "SupportTeam" ], "versions": [ { "id": "12593", "name": "Release 2.0.0", "archived": false, "released": true, "releaseDate": "2012-03-30" }, { "id": "13070", "description": "Release 1.8 Service Pack 2", "name": "Release 1.8.2", "archived": true, "released": true, "releaseDate": "2012-02-29" } ], "issuelinks": [], "assignee": { "name": "mculpepper", "key": "mculpepper", "displayName": "Marshall Culpepper", "active": true, "timeZone": "America/Los_Angeles" }, "updated": "2014-06-19T12:43:44.000+0000", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [ { "id": "10206", "name": "iOS", "description": "iOS Platform" } ], "description": "h3. Problem\r\n\r\nThe imageView's load event seems to fire prematurely on the first load of the app. Subsequent loads work as intended however it's most likely because the image is cached. Deleting the app and re-running will make the problem appear again.\r\n\r\nh3. Steps to Reproduce\r\n\r\n1. Run the code sample below\r\n\r\n{noformat}\r\n//create component instance\r\n var self = Ti.UI.createWindow({\r\n backgroundColor:'#ffffff',\r\n navBarHidden:true,\r\n exitOnClose:true\r\n });\r\n \r\n //construct UI\r\n var boundingBox = Ti.UI.createView({\r\n backgroundColor:'red',\r\n width:355,\r\n height:160\r\n });\r\n \r\n var sampleImageFromFarAway = Ti.UI.createImageView({\r\n image:'https://www.google.com/images/logo_sm.gif',\r\n height:'auto',\r\n width:'auto',\r\n preventDefaultImage:true,\r\n borderAroundMeView:boundingBox\r\n });\r\n \r\n var lateImageLoadingHandler = function(e) {\r\n Ti.API.info('Height: ' + e.source.size.height + ' Width: ' + e.source.size.width);\r\n var borderView = e.source.borderAroundMeView;\r\n borderView.width = e.source.width + 24;\r\n borderView.height = e.source.height + 24;\r\n }\r\n \r\n sampleImageFromFarAway.addEventListener('load', lateImageLoadingHandler);\r\n boundingBox.add(sampleImageFromFarAway);\r\n self.add(boundingBox); \r\n \r\nself.open();\r\n{noformat}\r\n\r\n2. On initial load, the size and width are returned as 0, On later runs the approproiate size and width are returned.\r\n\r\n3. To recreate the issue, delete the app from the simulator and clean the project and rerun the app.", "attachment": [], "flagged": false, "summary": "iOS: ImageView's load event fires before image's size is known", "creator": { "name": "vjoshi", "key": "vjoshi", "displayName": "Varun Joshi", "active": true, "timeZone": "America/New_York" }, "subtasks": [], "reporter": { "name": "vjoshi", "key": "vjoshi", "displayName": "Varun Joshi", "active": true, "timeZone": "America/New_York" }, "environment": "Platform OS: iOS ver 5.0\r\nTitanium SDK: 1.8.2/ CI Build", "comment": { "comments": [ { "id": "190335", "author": { "name": "stephentramer", "key": "stephentramer", "displayName": "Stephen Tramer", "active": true, "timeZone": "America/Los_Angeles" }, "body": "{{size}} does not refer to the image's size, but to the rendered size during the layout pass. This is expected behavior unless it regresses a previous custom definition on {{Ti.UI.ImageView}}.", "updateAuthor": { "name": "stephentramer", "key": "stephentramer", "displayName": "Stephen Tramer", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2012-04-09T10:56:49.000+0000", "updated": "2012-04-09T10:56:49.000+0000" }, { "id": "191155", "author": { "name": "vduggal", "key": "vduggal", "displayName": "Vishal Duggal", "active": false, "timeZone": "America/Los_Angeles" }, "body": "In 2.0.1 and above you can listen for the 'postlayout' event after load to determine when the image view is refreshed\r\nIn earlier versions of the titanium SDK, use the toImage() functionality on the imageView to get the size of the image. Code attached.\r\n{code}\r\n//create component instance\r\n var self = Ti.UI.createWindow({\r\n backgroundColor:'#ffffff',\r\n navBarHidden:true,\r\n exitOnClose:true\r\n });\r\n \r\n //construct UI\r\n var boundingBox = Ti.UI.createView({\r\n backgroundColor:'red',\r\n width:355,\r\n height:160\r\n });\r\n \r\n var sampleImageFromFarAway = Ti.UI.createImageView({\r\n image:'https://www.google.com/images/logo_sm.gif',\r\n height:'auto',\r\n width:'auto',\r\n preventDefaultImage:true,\r\n borderAroundMeView:boundingBox\r\n });\r\n \r\n var lateImageLoadingHandler = function(e) {\r\n Ti.API.info('Height: ' + e.source.size.height + ' Width: ' + e.source.size.width);\r\n if ( (e.source.size.width == 0) || (e.source.size.height == 0) )\r\n {\r\n \tvar blob = e.source.toImage();\r\n \tTi.API.info('Height: ' + blob.height + ' Width: ' + blob.width);\r\n\t var borderView = e.source.borderAroundMeView;\r\n \t borderView.width = blob.width + 24;\r\n \tborderView.height = blob.height + 24;\r\n } \r\n else\r\n {\r\n\t var borderView = e.source.borderAroundMeView;\r\n \t borderView.width = e.source.width + 24;\r\n \tborderView.height = e.source.height + 24;\r\n }\r\n }\r\n \r\n sampleImageFromFarAway.addEventListener('load', lateImageLoadingHandler);\r\n boundingBox.add(sampleImageFromFarAway);\r\n self.add(boundingBox); \r\n \r\nself.open();\r\n{code}", "updateAuthor": { "name": "vduggal", "key": "vduggal", "displayName": "Vishal Duggal", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2012-04-16T12:47:47.000+0000", "updated": "2012-04-16T12:57:03.000+0000" }, { "id": "191173", "author": { "name": "vduggal", "key": "vduggal", "displayName": "Vishal Duggal", "active": false, "timeZone": "America/Los_Angeles" }, "body": "You can also set the width and height of boundingBox to 'auto' and set left,right,top,bottom of sampleImageFromFarAway to 12. In which case there is no need to listen for the load event as the boundingBox will automatically resize when image loads.\r\n{code}\r\n var boundingBox = Ti.UI.createView({\r\n backgroundColor:'red',\r\n width:'auto',\r\n height:'auto',\r\n });\r\n \r\n var sampleImageFromFarAway = Ti.UI.createImageView({\r\n image:'https://www.google.com/images/logo_sm.gif',\r\n height:'auto',\r\n width:'auto',\r\n top:12,\r\n bottom:12,\r\n left:12,\r\n right:12,\r\n preventDefaultImage:true,\r\n borderAroundMeView:boundingBox\r\n });\r\n{code}", "updateAuthor": { "name": "vduggal", "key": "vduggal", "displayName": "Vishal Duggal", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2012-04-16T13:07:42.000+0000", "updated": "2012-04-16T13:07:42.000+0000" } ], "maxResults": 6, "total": 6, "startAt": 0 } } }