{ "id": "116988", "key": "TIMOB-16050", "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": "2", "description": "The problem described is an issue which will never be fixed.", "name": "Won't Fix" }, "resolutiondate": "2017-07-26T04:42:03.000+0000", "created": "2013-07-09T11:35:53.000+0000", "priority": { "name": "Critical", "id": "1" }, "labels": [ "Blob", "ImageView", "MobileWeb", "community", "postlayout" ], "versions": [ { "id": "15593", "description": "Release 3.1.3", "name": "Release 3.1.3", "archived": true, "released": true, "releaseDate": "2013-09-18" } ], "issuelinks": [], "assignee": { "name": "emerriman", "key": "emerriman", "displayName": "Eric Merriman ", "active": true, "timeZone": "America/Los_Angeles" }, "updated": "2017-07-26T04:42:14.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": "11500", "name": "MobileWeb", "description": "Mobile Web (HTML) Platform" } ], "description": "When using Ti.UI.createImageView on MobileWeb, the \"load\" event never fires. I tried to use \"postlayout\", but this event fires twice the FIRST time the image is loaded (i.e. is not in the browser cache) and once every subsequent time.\r\n\r\nUsing Blob (with it's various means of downloading image data into it) is not supported on MobileWeb, so there seems to be no way of actually knowing when an image is completely downloaded.\r\n\r\n*Steps to Reproduce*\r\n1. Create empty project in Studio based on Classic->HTML-based Application\r\n2. Remove everything between and in Resources/HTML/index.html\r\n3. Replace everything in app.js with code below\r\n4. Create folder Resources/comics and download panelA.png from http://www.ontonauts.com/reader_indev/comics/panelA.png\r\n5. Run the project\r\n\r\n\r\n\r\n\r\nYou will see that the \"image has loaded\" text is never sent to the Javascript console, i.e. the event is never triggered.\r\n*Test Case*\r\n{code}\r\nvar oxi = {};\r\n \r\n(function(){\r\n \r\n //require and open top level UI component\r\n var ApplicationWindow = require('ui/ApplicationWindow');\r\n var _win = new ApplicationWindow();\r\n _win.open();\r\n \r\n var eventHandler = function(e) {\r\n switch (e.type) {\r\n case 'load':\r\n Ti.API.info('image has loaded');\r\n break;\r\n }\r\n };\r\n \r\n var img = Ti.UI.createImageView();\r\n img.addEventListener('load',eventHandler);\r\n img.setImage('comics/panelA.png');\r\n _win.add(img);\r\n})();\r\n{code}", "attachment": [], "flagged": false, "summary": "MobileWeb: load event on imageView not firing", "creator": { "name": "mortenfthomsen", "key": "mortenfthomsen", "displayName": "Morten F. Thomsen", "active": true, "timeZone": "America/Los_Angeles" }, "subtasks": [], "reporter": { "name": "mortenfthomsen", "key": "mortenfthomsen", "displayName": "Morten F. Thomsen", "active": true, "timeZone": "America/Los_Angeles" }, "environment": "SDK 3.1.1GA, Mobile Web", "comment": { "comments": [ { "id": "261071", "author": { "name": "clathrop", "key": "clathrop", "displayName": "Carter Lathrop", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Hello Morten,\n\nWould you mind providing a simple test case that demonstrates the bug you mentioned where the imageView load event is not working? If I can reproduce this for myself I will be sure to let engineering know and they will fix the load event for you. Sorry for the inconvenience, awaiting your reply.\n\nThanks,\n\nCarter", "updateAuthor": { "name": "clathrop", "key": "clathrop", "displayName": "Carter Lathrop", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2013-07-09T16:29:04.000+0000", "updated": "2013-07-09T16:29:04.000+0000" }, { "id": "261074", "author": { "name": "mortenfthomsen", "key": "mortenfthomsen", "displayName": "Morten F. Thomsen", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Steps to reproduce:\r\n\r\n1. Create empty project in Studio based on Classic->HTML-based Application\r\n2. Remove everything between and in Resources/HTML/index.html\r\n3. Replace everything in app.js with code below\r\n4. Create folder Resources/comics and download panelA.png from http://www.ontonauts.com/reader_indev/comics/panelA.png\r\n5. Run the project\r\n\r\nYou will see that the \"image has loaded\" text is never sent to the Javascript console, i.e. the event is never triggered.\r\n\r\n{code}var oxi = {};\r\n\r\n(function(){\r\n\t\r\n\t//require and open top level UI component\r\n\tvar ApplicationWindow = require('ui/ApplicationWindow');\r\n\tvar _win = new ApplicationWindow();\r\n\t_win.open();\r\n\r\n\tvar eventHandler = function(e) {\r\n\t\tswitch (e.type) {\r\n\t\t\tcase 'load':\r\n\t\t\t\tTi.API.info('image has loaded');\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t};\r\n\r\n\tvar img = Ti.UI.createImageView();\r\n\timg.addEventListener('load',eventHandler);\r\n\timg.setImage('comics/panelA.png');\r\n\t_win.add(img);\r\n})();\r\n{code}\r\n\r\ni.e. this is (as far as I can tell) a pure textbook example of how it SHOULD work, but it doesn't", "updateAuthor": { "name": "mortenfthomsen", "key": "mortenfthomsen", "displayName": "Morten F. Thomsen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2013-07-09T16:55:00.000+0000", "updated": "2013-07-09T16:56:44.000+0000" }, { "id": "261152", "author": { "name": "clathrop", "key": "clathrop", "displayName": "Carter Lathrop", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Hi Morten,\n\nSo after speaking with the engineering team about this issue, they strongly advised against using the HTML based application for Mobile Web. I wrote up my own test app to test the loading of an image view on mobile web and after researching the documentation it is indeed written that the load event is not supported for mobile web. Rather it is recommended to use postlayout. I tried this with this code:\n\n{code}\nvar win = Ti.UI.createWindow({\n\tbackgroundColor: 'white'\n});\n\nvar imgView = Ti.UI.createImageView({\n\timage: 'smileyicon.png'\n});\n\n\nimgView.addEventListener('postlayout', function(e){\n\talert('image has been laid out');\n});\n\nimgView.addEventListener('click', function(e){\n\talert('image has been clicked');\n});\n\n\nwin.add(imgView);\n\nwin.open();\n{code} \n\nAnd everything is working as expected. I could not recreate an instance where postlayout fires twice. Can you try running my code and letting me know if the double firing is still happening for you?\n\nThanks,\n\nCarter", "updateAuthor": { "name": "clathrop", "key": "clathrop", "displayName": "Carter Lathrop", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2013-07-09T21:30:17.000+0000", "updated": "2013-07-09T21:30:17.000+0000" }, { "id": "261230", "author": { "name": "mortenfthomsen", "key": "mortenfthomsen", "displayName": "Morten F. Thomsen", "active": true, "timeZone": "America/Los_Angeles" }, "body": "I tried your code (using Classic->Default Project this time, replacing app.js code with your code), with a minor change - I used Ti.API.info instead of alert - this causes the \"image has been laid out\" message to be posted several times - sometimes one, sometimes two an sometimes even three. Try hitting reload in the browser while showing the Javascript Console - you should be able to reproduce the same behaviour. If running on localhost, you might want try to do it from a webserver instead - I can reproduce both places...\r\n\r\nThus, the postlayout event can't be trusted as a means of detecting when the image has been completely loaded. This is really frustrating ...\r\n\r\n[edit] I tried this in other browsers than Chrome - it seems Chrome might be the culprit, as Safari and Firefox seems to only trigger the event once - for what it's worth", "updateAuthor": { "name": "mortenfthomsen", "key": "mortenfthomsen", "displayName": "Morten F. Thomsen", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2013-07-10T06:11:24.000+0000", "updated": "2013-07-10T07:37:33.000+0000" }, { "id": "283562", "author": { "name": "mrahman", "key": "mrahman", "displayName": "Mostafizur Rahman", "active": true, "timeZone": "Asia/Dhaka" }, "body": "I can reproduce the MobileWeb problem with both load and post layout events. postlayout event is fired twice but load event is not fired at all. \r\n\r\nh5. Test Environment:\r\nOS: MAC OS X 10.8.5\r\nTi SDK: 3.1.3 GA, 3.2.0.x\r\nTi CLI: 3.3.0\r\nGoogle Chrome, Firefox \r\n\r\nh5. Test Code\r\n{code}\r\nvar win = Ti.UI.createWindow({\r\n\tbackgroundColor : 'white'\r\n});\r\n\r\nvar imgView = Ti.UI.createImageView({\r\n\timage : 'comics/panelA.png'\r\n});\r\n\r\nimgView.addEventListener('load', function(e) {\r\n\talert('image has been laid out');\r\n});\r\n\r\nimgView.addEventListener('postlayout', function(e) {\r\n alert('image has been laid out alert with postlayout event');\r\n});\r\n\r\nimgView.addEventListener('click', function(e) {\r\n\talert('image has been clicked');\r\n});\r\n\r\nwin.add(imgView);\r\n\r\nwin.open();\r\n\r\n{code}\r\nh5. Step to reproduces\r\n\r\n# Create a new project\r\n# Paste this code in app.js file\r\n# Run this in mobileweb \r\n# No load alert message display \r\n# post layout alert message is displayed twice\r\n \r\nh5. Expected Result\r\n\r\n# Load alert message will display\r\n# post layout alert message is displayed once\r\n\r\n\r\nThanks", "updateAuthor": { "name": "ragrawal", "key": "ragrawal", "displayName": "Ritu Agrawal", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2013-12-10T17:28:45.000+0000", "updated": "2013-12-19T06:29:15.000+0000" }, { "id": "285144", "author": { "name": "ragrawal", "key": "ragrawal", "displayName": "Ritu Agrawal", "active": true, "timeZone": "America/Los_Angeles" }, "body": "Reproduced the issue with both load event (not fired at all) and postlayout event (fired twice) so moving it to engineering. Note that each of this issue reproduces individually and you don't need to use these two events together.", "updateAuthor": { "name": "ragrawal", "key": "ragrawal", "displayName": "Ritu Agrawal", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2013-12-19T06:30:35.000+0000", "updated": "2013-12-19T06:30:35.000+0000" }, { "id": "424743", "author": { "name": "lmorris", "key": "lmorris", "displayName": "Lee Morris", "active": false, "timeZone": "America/Los_Angeles" }, "body": "Resolving as Won't Fix as MobileWeb has been deprecated.", "updateAuthor": { "name": "lmorris", "key": "lmorris", "displayName": "Lee Morris", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2017-07-26T04:42:03.000+0000", "updated": "2017-07-26T04:42:03.000+0000" } ], "maxResults": 8, "total": 8, "startAt": 0 } } }