1 Reply Latest reply on Dec 13, 2010 3:53 PM by Peter deHaan

    Preloading images in a Spark List itemRenderer?

    brian914 Level 1

      I am using a spark list to load thumbs of a slide show. The list is as following.

       

      <s:List id="thumbList" width="100%" height="80" cacheAsBitmap="true" cachePolicy="on" useVirtualLayout="false"
                itemRenderer="components.ThumbTrayListItem" 
                dataProvider="{slideArrayCollection}">
           <s:layout>
                <s:HorizontalLayout columnWidth="150" gap="15" paddingRight="5"/>
           </s:layout>
      </s:List>
      

       

      I use an item renderer for my thumbs that has the following in it:

       

      <mx:Image id="thumbImg" source="{data.thumbPath}">
      

       

      When I load this via a browser there are times when the images don't load, or load super slowly, making the list look like it is broken. I would like to embed the images in the application, but just can't seem to do it. I have tried a number of things, but it just doesn't seem to work.

       

      How would this be done?

       

      Thanks a lot for any help!

        • 1. Re: Preloading images in a Spark List itemRenderer?
          Peter deHaan Level 4

          Can you embed the assets in the data provider?

          <?xml version="1.0" encoding="utf-8"?>

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark"

                         xmlns:mx="library://ns.adobe.com/flex/mx"

                         initialize="init();">

           

              <fx:Declarations>

                  <s:ArrayCollection id="slideArrayCollection" />

              </fx:Declarations>

           

              <fx:Script>

                  <![CDATA[

                      [Embed("accept.png")]

                      protected const Img1:Class;

           

                      [Embed("add.png")]

                      protected const Img2:Class;

           

                      [Embed("anchor.png")]

                      protected const Img3:Class;

           

                      [Embed("application_add.png")]

                      protected const Img4:Class;

           

                      [Embed("application.png")]

                      protected const Img5:Class;

           

                      protected function init():void {

                          slideArrayCollection.addItem({label:"Accept", thumbPath:Img1});

                          slideArrayCollection.addItem({label:"Add", thumbPath:Img2});

                          slideArrayCollection.addItem({label:"Anchor", thumbPath:Img3});

                          slideArrayCollection.addItem({label:"Application Add", thumbPath:Img4});

                          slideArrayCollection.addItem({label:"Application", thumbPath:Img5});

                      }

                  ]]>

              </fx:Script>

           

              <s:List id="thumbList" useVirtualLayout="false"

                      itemRenderer="ThumbTrayListItem"

                      dataProvider="{slideArrayCollection}"

                      height="150" width="200">

                  <s:layout>

                      <s:HorizontalLayout columnWidth="150" gap="15" paddingRight="5" variableColumnWidth="false"/>

                  </s:layout>

              </s:List>

           

          </s:Application>

           

          Peter