Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Simple image refresh

I've tried a dozen ways to refresh a createImageView image, but nothing seems to work. The filename of the image will not change. I just want to reload it every X seconds.

Suggestions?

— asked June 1st 2010 by Chris Dotson
  • android
  • createimageview
  • image
  • iphone
  • mobile
  • refresh
  • reload
0 Comments

7 Answers

  • Just try something like this:

    var loadImage = function() {
        var seed=Math.random();
        url = "http://host/dir/image.jpg?"+seed;
        image.image = url;
    };
    
    loadImage();
    setInterval(loadImage,10000);
    
    — answered November 8th 2010 by Francesco Boscarino
    permalink
    4 Comments
    • Thanks, very nice way. That helped me a lot!

      — commented April 8th 2012 by Christopher Heymann
    • NICE!

      — commented August 3rd 2012 by matt s
    • Thanks. I'd like to mention that it works with local files too:

      url = Ti.Filesystem.applicationDataDirectory + 'img/portrait.jpg?' + seed;

      When you try to replace an existing image and, for example, refresh a tableviewRow.leftImage that will do the trick.

      — commented September 9th 2012 by Imobach Martin
    • The last comment refers only to iOS. In Android, it doesn't work. As of SDK 2.1.0

      — commented September 10th 2012 by Imobach Martin
  • I can get an image to load that way, but how do I force a refresh of that image?

    — answered June 1st 2010 by Chris Dotson
    permalink
    1 Comment
    • You should be able to set the url property to the new image and it should update.

      — commented June 1st 2010 by Don Thorp
  • As a workaround, I decided to use a WebView instead of an ImageView. It's not the way I want to do it, but in the HTML I can actually put the Javascript in to refresh the image.

    I would still love a way to do this in ImageView!

    — answered June 2nd 2010 by Chris Dotson
    permalink
    0 Comments
  • I just wrote this and it works on both iPhone and Android.

    
    // this sets the background color of the master UIView (when there are no windows/tab groups on it)
    Titanium.UI.setBackgroundColor('#000');
    
    // create tab group
    var tabGroup = Titanium.UI.createTabGroup();
    
    var image1 = 'image1.png';
    var image2 = 'image2.png';
    
    //
    // create base UI tab and root window
    //
    var win1 = Titanium.UI.createWindow({  
        title:'Tab 1',
        backgroundColor:'#fff'
    });
    var tab1 = Titanium.UI.createTab({  
        icon:'KS_nav_views.png',
        title:'Tab 1',
        window:win1
    });
    
    var img = Titanium.UI.createImageView({
        width:100,
        height:100,
        top:50,
        left:110,
        url:image1
    });
    
    win1.add(img);
    
    var btn = Titanium.UI.createButton({
        title:'load',
        width:100,
        height:35,
        top:50,
        left:0
    });
    
    function switchImage(){
        if(img.url == image1){
            img.url = image2;
        } else {
            img.url = image1;
        }
    }
    
    btn.addEventListener('click',function(){
        switchImage();
    });
    
    setInterval(switchImage,3000);
    
    win1.add(btn);
    
    //
    //  add tabs
    //
    tabGroup.addTab(tab1);  
    
    
    // open tab group
    tabGroup.open();
    
    — answered June 2nd 2010 by Clint Tredway
    permalink
    0 Comments
  • I am having issues with this setInterval thing. Can someone help? I have set up an xhr calling a JSON service. No problems getting data, no problem calling data every 10 seconds with set interval, the issue is that every 10 seconds the data is called it doesn't "replace" the last data, visually, it adds it on top of the data already there. So it looks like my data text gets bolder and bolder every 10 seconds. Any suggestions?

    — answered June 24th 2010 by Carlos Mosqueda
    permalink
    0 Comments
  • In my case I'm trying image to reload every time I download a new image.

    So instead of downloading picture into file and setting ImageView "image" property to filename, I just set "image" property to BLOB data I recieve from server - that helps in my case.

    P.S.:
    -
    But anyway I had to use two ImageViews and move one above another (using zIndex) each time a picture changes - to prevent bliking.

    — answered October 22nd 2014 by Nick Pastuhov
    permalink
    0 Comments
  • You should be able to just set the url property with the new image url.

    var image = Ti.UI.createImageView();

    image.url = "my.png";

    — answered June 1st 2010 by Don Thorp
    permalink
    2 Comments
    • Should have actually posted my comment here.. it's a Monday for me. Referencing my non-answer-comment…. how does that help with an image refresh? I get how that would load the image initially, but not reload it every X seconds.

      — commented June 1st 2010 by Chris Dotson
    • Hi Chris, You could try setInterval as described here: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium-module

      — commented June 2nd 2010 by Chris Reed
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.