Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-16050] MobileWeb: load event on imageView not firing

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionWon't Fix
Resolution Date2017-07-26T04:42:03.000+0000
Affected Version/sRelease 3.1.3
Fix Version/sn/a
ComponentsMobileWeb
LabelsBlob, ImageView, MobileWeb, community, postlayout
ReporterMorten F. Thomsen
AssigneeEric Merriman
Created2013-07-09T11:35:53.000+0000
Updated2017-07-26T04:42:14.000+0000

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. Using 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. *Steps to Reproduce* 1. Create empty project in Studio based on Classic->HTML-based Application 2. Remove everything between and in Resources/HTML/index.html 3. Replace everything in app.js with code below 4. Create folder Resources/comics and download panelA.png from http://www.ontonauts.com/reader_indev/comics/panelA.png 5. Run the project You will see that the "image has loaded" text is never sent to the Javascript console, i.e. the event is never triggered. *Test Case* 
var oxi = {};
 
(function(){
     
    //require and open top level UI component
    var ApplicationWindow = require('ui/ApplicationWindow');
    var _win = new ApplicationWindow();
    _win.open();
 
    var eventHandler = function(e) {
        switch (e.type) {
            case 'load':
                Ti.API.info('image has loaded');
                break;
        }
    };
 
    var img = Ti.UI.createImageView();
    img.addEventListener('load',eventHandler);
    img.setImage('comics/panelA.png');
    _win.add(img);
})();

Comments

  1. Carter Lathrop 2013-07-09

    Hello Morten, Would 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. Thanks, Carter
  2. Morten F. Thomsen 2013-07-09

    Steps to reproduce: 1. Create empty project in Studio based on Classic->HTML-based Application 2. Remove everything between and in Resources/HTML/index.html 3. Replace everything in app.js with code below 4. Create folder Resources/comics and download panelA.png from http://www.ontonauts.com/reader_indev/comics/panelA.png 5. Run the project You will see that the "image has loaded" text is never sent to the Javascript console, i.e. the event is never triggered. 
    var oxi = {};
   
   (function(){
   	
   	//require and open top level UI component
   	var ApplicationWindow = require('ui/ApplicationWindow');
   	var _win = new ApplicationWindow();
   	_win.open();
   
   	var eventHandler = function(e) {
   		switch (e.type) {
   			case 'load':
   				Ti.API.info('image has loaded');
   				break;
   		}
   	};
   
   	var img = Ti.UI.createImageView();
   	img.addEventListener('load',eventHandler);
   	img.setImage('comics/panelA.png');
   	_win.add(img);
   })();
    i.e. this is (as far as I can tell) a pure textbook example of how it SHOULD work, but it doesn't
  3. Carter Lathrop 2013-07-09

    Hi Morten, So 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: 
       var win = Ti.UI.createWindow({
   	backgroundColor: 'white'
   });
   
   var imgView = Ti.UI.createImageView({
   	image: 'smileyicon.png'
   });
   
   
   imgView.addEventListener('postlayout', function(e){
   	alert('image has been laid out');
   });
   
   imgView.addEventListener('click', function(e){
   	alert('image has been clicked');
   });
   
   
   win.add(imgView);
   
   win.open();
    And 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? Thanks, Carter
  4. Morten F. Thomsen 2013-07-10

    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... Thus, the postlayout event can't be trusted as a means of detecting when the image has been completely loaded. This is really frustrating ... [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
  5. Mostafizur Rahman 2013-12-10

    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.

    Test Environment:

    OS: MAC OS X 10.8.5 Ti SDK: 3.1.3 GA, 3.2.0.x Ti CLI: 3.3.0 Google Chrome, Firefox

    Test Code

       var win = Ti.UI.createWindow({
   	backgroundColor : 'white'
   });
   
   var imgView = Ti.UI.createImageView({
   	image : 'comics/panelA.png'
   });
   
   imgView.addEventListener('load', function(e) {
   	alert('image has been laid out');
   });
   
   imgView.addEventListener('postlayout', function(e) {
       alert('image has been laid out alert with postlayout event');
   });
   
   imgView.addEventListener('click', function(e) {
   	alert('image has been clicked');
   });
   
   win.add(imgView);
   
   win.open();

    Step to reproduces

    Create a new project

    Paste this code in app.js file

    Run this in mobileweb

    No load alert message display

    post layout alert message is displayed twice

    Expected Result

    Load alert message will display

    post layout alert message is displayed once

    Thanks
  6. Ritu Agrawal 2013-12-19

    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.
  7. Lee Morris 2017-07-26

    Resolving as Won't Fix as MobileWeb has been deprecated.

JSON Source