Quantcast
Channel: Appcelerator Developer Center Q&A Unanswered Questions 20
Viewing all articles
Browse latest Browse all 8068

ImageView issue on MobileWeb

$
0
0

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.


Viewing all articles
Browse latest Browse all 8068

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>