CODEWITHSUNDEEP
listactionscript-3apache-flex
idnumberone
idnumberone

Reputation: 11

flex mobile - performance of spark List with ItemRenderers that has large image

I'm developing the spark List with Large Images in flex mobile. Each ItemRenderer has a large image.

like this.

<s:ItemRenderer>
    ...
    <s:BitmapImage source="{data.bmpData}" />
</s:ItemRenderer>

In dataProvider, there is BitmapData as name "bmpData".

The problem is performance while scrolling. While scrolling, it stopped for a while when new Image is rendered.

help me please.

Upvotes: 0

Views: 87

Answers (1)

Pan
Pan

Reputation: 2101

If the problem is you render too many bitmapdata in same time, you can render them one by one in different frames.

Here is an example. Make a custom ItemRenderer

class YourItemRenderer
{

    override public function set data(value:Object):void
    {
         if (super.data != value)
         {
              super.data = value;

              yourBitmapImage.source  = null;

              //when the data change, don't call the render function directly
              EnterFrameManager.getInstance().addRenderFunction(render)
         }
    }

    private function render():void
    {
        if (yourBitmapImage != null && data != null）
        {
             yourBitmapImage.source = data.bmpData;
        }
    }
 }

EnterFrameManager is used to control the render functions.

 class EnterFrameManager 
 {
        import mx.core.FlexGlobals;

        public function EnterFrameManager()
        {
             FlexGlobals.topLevelApplication.addEventListener( Event.EnterFrame, onEnterFrameHandler)         
        }

        private var _instance:EnterFrameManager;

        public static function getInstance():EnterFrameManager
        {

             if (_instance == null)
             {
                  _instance = new EnterFrameManager();
             }

             return instance;
        }

        //save the render functions
        private var renderQueue:Array = [];

        private var nowIntervalFrame:int = 0;

        //change it to small value when you don't feel lag
        private const UPDATE_INTERVAL_FRAMES:int = 6;

        private function onEnterFrameHandler(e:Event):void
        {
              nowIntervalFrame++;

              if (nowIntervalFrame >= UPDATE_INTERVAL_FRAMES)
              {
                  nowIntervalFrame = 0;

                  //change renderQueue by waitQueue
                  for each (var f:Function in waitQueue)
                  {   
                      addFunctionToQueue(f, renderQueue);
                  }

                  waitQueue.length = 0;

                  if (renderQueue.length > 0)
                  {
                      var f:Function = renderQueue.shift();

                      f();
                  }
              }
        }

        private var waitQueue:Array = [];

        public function addRenderFunction(f:Function):void
        {
            addFunctionToQueue(f, waitQueue);
        }

        private function addFunctionToQueue(f:Function, queue:Function):void
        {
           var index:int = queue.indexOf(f);

            if (index == -1)
            {
                 queue.push(f);
            }
            else
            {
                var temp:Function = queue.splice(index, 1);

                queue.push(temp);
            }
        }

 }

Upvotes: 1

Related Questions