I am developing a digital comics reader for mobile web, but I'm experiencing some strange behaviour from ImageView which is making me very frustrated.
Check the following code:
var ApplicationWindow = require('ui/ApplicationWindow'); var _img1,_img2; var _win = new ApplicationWindow(); var _view = Ti.UI.createView ({opacity:1}); var imgPostLayout = function(e) { Ti.API.info(e.source.image + ' completed loading'); }; var addImages = function() { _img1 = Ti.UI.createImageView({image:'imagefile1.png', opacity:1}); _img2 = Ti.UI.createImageView({image:'imagefile2.png', opacity:1}); _view.add(_img1); _view.add(_img2); _img1.addEventListener('postlayout',imgPostLayout); _img2.addEventListener('postlayout',imgPostLayout); }; var windowPostLayout = function() { Ti.API.info(''windowPostLayout'); addImage.apply(this); }; _win.add(_view); _win.addEventListener('postlayout',windowPostLayout); _win.open();If I empty the browser cache, the imgPostLayout method is triggered twice; first time when the image "drawing" on the screen starts, and then once again when it finishes. Upon a refresh of the same page (thus the image is in the browser cache), the imgPostLayout is only fired once. I can't seem to find any way to distinguish between the first and second time the event is triggered - I tried checking rect and size but they remain the same.
The idea is to load the images, and fade them into visibility only after they have completed loading - for a better user experience.
I have tried to use Ti.Network.createHTTPClient, but there is no way to transfer the imagedata into the ImageView in MobileWeb.