flex mobile - sparkのパフォーマンス大きな画像を持つItemRenderersのリスト

Question

私はフレックスモバイルで大きな画像を持つsparkリストを開発しています。 各ItemRendererには大きなイメージがあります。

このようです。

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

dataProviderには、「bmpData」という名前のBitmapDataがあります。

問題はスクロール中のパフォーマンスです。 スクロール中は、新しいImageがレンダリングされるとしばらく停止しました。

お願いします。

Answer 1

同時に多くのビットマップデータをレンダリングすると、異なるフレームで1つずつレンダリングできます。

ここは例です。 EnterFrameManagerレンダリング機能を制御するために使用される

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; 
     } 
    } 
} 

たItemRendererカスタムしてください。

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); 
      } 
     } 

}