1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    91
    Vote Rating
    1
    Answers
    3
    ZyBeR is on a distinguished road

      0  

    Default Unanswered: Reloading images and avoiding cache issues?

    Unanswered: Reloading images and avoiding cache issues?


    What's the preferred way of reloading Ext.Img from a url?

    I want to reload images from a server when they are updated. I have a json stream that tells me if any images has been updated so I know when to issue the reload event.
    I'm using Ext.Img as containers and are currently setting the src to '' and the right after to the url. This works in Chrome under OSX but on an iPhone it won't refresh the image, I asume it's a caching issue, but the strange thing is that not even appending a random string at the url-end would make it reload.

    Is there any better way of reloading images? Preferably with preloading and switching seamlessly.
    Should I maybe create a new Ext.Img and when it's loaded remove the old and set the new one in it's place?

    Or would it be better (if it's posible) load the image as a data stream convert it into Base64 and set it as a css style on the container? That way there wouldn't be any caching issues.. but the Base64 conversion would take some extra processing time todo.

    All advices are very welcome!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    So you are setting the same url to the image and so it's not loading it as it's the same url. If you append a random param it won't load? Like adding

    Code:
    '_dc' + new Date().getTime()
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    91
    Vote Rating
    1
    Answers
    3
    ZyBeR is on a distinguished road

      0  

    Default


    I ended up doing a custom function that creates an Ext.Img object with a listener for load, when it's loaded it removes the previous image and adds itself to it's parent container.
    Works a treat.

    And regarding the "no cache" parameter in the url, I'm now using one, that was the only way of getting the image to reload on an iPhone.
    PHP Code:
    '?nocache='+Math.random()*9999999 
    I was setting the url to '' (empty string) and right after that setting the old url back again, that worked on my computer but not on the iPhone.

    I'm not really found of the "no cache" method as that bypasses the caching server...

    Anyhow, here's the image loading method I'm using.

    PHP Code:
    var addLaneImage = function(laneurl) {
        var 
    laneContainer Ext.getCmp('lt-lane-container-'lane);
        
        
    Ext.create('Ext.Img', {
            
    itemId'lane',
            
    srcurl,
            
    mode'image',
            
    width'100%',
            
    height'100%',
            
    listeners: {
                
    tap: function() {
                    if (
    Ext.getCmp('mainNav').getNavigationBar().isHidden()) {
                        
    Ext.getCmp('mainNav').getNavigationBar().show('fade');    
                    } else {
                        
    Ext.getCmp('mainNav').getNavigationBar().hide('fade');
                    }
                },
                
    load: function(objeeOpts) {
                    
    laneContainer.getComponent('lane').destroy();
                    
    laneContainer.add(obj);
                }
            }
        });


Thread Participants: 1