4 Replies Latest reply on Sep 5, 2010 1:38 AM by Francisc

    List with many images

    Francisc Level 3



      I have a list with lots of images in the itemRenderer, over 500.

      I use virtualization on that list.


      When people scroll, quickly to the bottom, it can take a bit to load images.




      1. In what order does the list control load images? Top to Bottom from whole list or Topp to Bottom from just the visible part?

      2. Is there anyway I can give priority to a certain image to load first over others? Images have the source property set to a relative path on the server.

      3. Is there anything I can do to speed up the loading process in general?


      Thank you!

        • 1. Re: List with many images
          flex4 Level 2



                   Flex has a beauty that flex will load and create instances for visible components only .. u have some list with 500 images. but u are displaying some 20 images first so flex will instatiate only 20 images itemrenderers and if u scroll down then it will create another number of instances of itemrenderer so it will take some time to load image in the list .. that is the reason to take time to load an image in list



                      Upto my knowledge load the urls into the array or arraycollection and then assign that to list... use itemrenderer as small component without assigning any other components to that itemrenderer... it will make u easy to load the images very flast...



                      Hope u got my point...

          • 2. Re: List with many images
            Francisc Level 3

            Hi and thanks, but that wasn't what I was asking.


            I know how it works, that's why I said I use virtualization.

            I also said I have the URL as string paths to the images (relative addresses) in my data provider.


            Thanks though.

            • 3. Re: List with many images
              Shongrunden Adobe Employee

              The List doesn't load the images, your item renderer does.  I assume you load those images by overriding the data setter in the renderer.


              When the List first loads up it only creates enough renderers to show what is initially in view (because of virtualization), lets say the first 10 items.  That means the first 10 images will be loaded, but no other images will be loaded unless you scroll the List to expose new items.  If you want to have certain images available before others then you could have your application load them when its not busy and that way they might be available before the user scrolls.


              Even if you were to load all of the images before the List was created you might still seem some flickering when scrolling because they are getting reloaded in as the user scrolls around.  To address this you might want to look into caching the images as they are loaded, there is an example here: http://flexponential.com/2010/01/10/caching-images-loaded-from-a-spark-item-renderer/

              • 4. Re: List with many images
                Francisc Level 3

                Thank you Shongy, this is exactly what I wanted.