1. #1
    Sencha User
    Join Date
    Jan 2013
    Location
    Bristol, UK
    Posts
    9
    Vote Rating
    0
    neilybod is on a distinguished road

      0  

    Default Answered: Individual loading spinnies

    Answered: Individual loading spinnies


    I've searched around for this, but haven't found what I need.

    Basically, I have a dataview or list which loads a number of images dynamically from an external feed (kindof like a facebook wall).
    I have a loading indicator which displays while the store loads, no problem.
    What I want is to show little loading spinnies on any images that are in the feed, while they are downloading. Currently, to show the images i'm using a DIV with a background image - here's a snippet (i've cut out a bunch of irrelevant stuff):
    Code:
    itemTpl: new Ext.XTemplate(
                '<div class="itemcontainer">',
                '<div>{Comment}</div>',
                '<div class="photo" style="background-image:url({ImageURL})"><img /></div>',
                '</div>');
    I'm thinking I can use a Ext.Img for every image in the feed, and maybe apply a mask to each instance, but not sure how to do that within XTemplate. Maybe there's an easier way?

    Any help appreciated

  2. Hi,

    I worked out a solution that works pretty well using a loading gig image....I searched on google for one I liked. I forget exactly how I set it up without looking at my code but I think I setup a class in CSS like this:

    .loadingimage {
    background-image:url('loading.gif');
    background-color:#cccccc;
    }

    Then in my Ext.img I set the the background cls as loading image. From memory this is key as you have the loading image as a background image and then the actual image loads ontop.

    Hope this helps,

    :-)

  3. #2
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    407
    Answers
    17
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default Loading GIF

    Loading GIF


    Hi,

    I worked out a solution that works pretty well using a loading gig image....I searched on google for one I liked. I forget exactly how I set it up without looking at my code but I think I setup a class in CSS like this:

    .loadingimage {
    background-image:url('loading.gif');
    background-color:#cccccc;
    }

    Then in my Ext.img I set the the background cls as loading image. From memory this is key as you have the loading image as a background image and then the actual image loads ontop.

    Hope this helps,

    :-)

  4. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Answers
    41
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    this looked interesting to me: http://www.sencha.com/forum/showthre...ner-in-toolbar. Maybe you can adapt it for your needs?

  5. #4
    Sencha User
    Join Date
    Jan 2013
    Location
    Bristol, UK
    Posts
    9
    Vote Rating
    0
    neilybod is on a distinguished road

      0  

    Default


    Thanks guys - I ended up doing the animated GIF approach and it works a treat :-)

    However, I would much prefer a pure CSS approach. Also, i'm slightly worried about device performance if there are numerous animated gifs on screen (even though they are hidden by the photo eventually)... i'm not an expert on GPU type stuff, but I worry that the device is burning processing cycles having to keep animate those hidden GIFs...

    Cheers again for your help