Why does Item renderer call REMOVED_FROM_STAGE get called

I am posting a sample item renderer for TileList I am using. I broke it down to a a very basic renderer.
Here is the traces I get when I run it.

1) createChildren is called

2) commitProperties is called

3) removeFromStage gets called

I am not sure why removeFromStage is getting called, but after looking apparently ListBase removes it for some reason.

What I really want to do in the end result is stop the image loading when it gets scrolled off the list, obviously I can not use the REMOVED_FROM_STAGE event as this gets triggered during the init of the list.

The reason for all this is because when I have a few hundred items in the list and each item can have up to 9 images.
When the user scrolls to 3/4 of the way down, there is a long long delay until the thumbnails catch up loading.
I was hoping REMOVED_FROM_STAGE would allow me to null out the imag开发者_开发问答e.source property or something, but that can't be done.

Technically, as I understand it a renderer never moves position the data and contents move.

So I guess what I am really asking is there a way to optimize the code to where I can stop image loading or any other ideas to make the scrolling more efficient?

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" >
  <mx:Script>
    <![CDATA[
      import mx.controls.Image;

      override public function set data(val:Object):void{
        super.data = val;
        if( !this.thumbnailContainer ){
          return;
        }
        if( !val ){
          return;
        }

        if( this.data.images.length != this.thumbnailContainer.numChildren ){
          this.createChildren();
        }
      }
      override protected function createChildren():void{
        super.createChildren()
        if( this.data == null ){
          return;
        }
        for( var i:int = 0; i < this.data.images.length;i++){
          var thumbnail:Image = new Image();
          thumbnail.addEventListener(Event.COMPLETE, onLoad );
          thumbnail.addEventListener(Event.REMOVED_FROM_STAGE, removeFromStage );
          var p:Panel = new Panel( );
          p.addChild( thumbnail )
          p.height = 120
          p.verticalScrollPolicy = 'off';
          p.horizontalScrollPolicy = 'off';
          thumbnailContainer.addChild( p )
        }
      }

      override protected function commitProperties():void{
        super.commitProperties();
        for( var i:int = 0 ;i<this.data.images.length;i++){
          var p:Panel = (this.thumbnailContainer.getChildAt(i) as Panel)
          var img:Image = (p.getChildAt(0) as Image)
          img.source = this.data.images[i].src
        }
      }

      private function removeFromStage( e:Event ):void{
        trace('removeFromStage')
      }

      private function onLoad( e:Event ):void{
        trace('onLoad')
        var img:Image = e.currentTarget as Image;
        var scale:Number = (img.parent.height - 50) / img.contentHeight;
        img.scaleX = scale;
        img.scaleY = scale;
      }
    ]]>
  </mx:Script>

<mx:HBox id="thumbnailContainer" />

I know that Flex removes (and immediately readds) all item renderers of a list component from the stage when it starts to display scrollbars. I run into that issue year ago.

I have some reservations about what is going on in your itemrenderer. I am a rookie when it comes to lifecycle implementations, but I wouldn't worry about the data during the createChildren() function, I would handle that in the set data function.

override public function set data( value:Object ):void

You also seem to be violently manhandling some mx:Image in your renderer. If I have a renderer with an Image, I make my Image an mxml component ( if the renderer is in mxml ), and just manipulate the source through the set data function which I override.

I think that some of your issues may be due to your lifecycle implementation which is far less forgiving for itemrenderers compared to other components because itemrenderers are recycled.

I looked at your code again, it seems like you have some kind of list of Images in your list of itemrenderers, have you ever considered using a TileList ? You say that your