Results 1 to 4 of 4

Thread: Individual loading spinnies

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Jan 2013
    Location
    Bristol, UK
    Posts
    9
    Vote Rating
    0
      0  

    Default 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
    454
    Answers
    19
    Vote Rating
    22
      0  

    Default 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 User
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    723
    Answers
    42
    Vote Rating
    46
      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
      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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •