mx:Image used as itemRenderer for a s:List blinks everytime the list get scrolled (jquery scrollable_问答_开发者

I have something like this:

<?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" creationComplete="init()">

    <fx:Declarations>

        <s:ArrayCollection id="pics"> 
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p01.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m01.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g01.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p02.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m02.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g02.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p03.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m03.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g03.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p04.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m04.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g04.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p05.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m05.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g05.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p06.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m06.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g06.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p07.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m07.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g07.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p08.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m08.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g08.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p09.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m09.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g09.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p10.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m10.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g10.jpg"/>
        </s:ArrayCollection>

    </fx:Declarations>

    <fx:Script>
        <![CDATA[
        import spark.layouts.HorizontalLayout;

        private var thumbsByPage:uint = 3;
        private var actualPage:uint = 0;
        private var firstPage:uint = 0;
        private var lastPage:uint = 0;

        private function init():void {

            thumbs.scroller.setStyle("verticalScrollPolicy", "none");
            thumbs.scroller.setStyle("horizontalScrollPolicy", "none");

            thumbs.selectedIndex = 0;
            actualPage = 0;
            lastPage = Math.ceil(thumbs.dataProvider.length / thumbsByPage);

        }

        public function get hasNext():Boolean {

            return actualPage < lastPage;

        }

        public function get hasPrev():Boolean {

            return actualPage > firstPage;

        }

        private function next():void {

            if (hasNext) {

                actualPage++;
                scrollIt();

            }

        }

        private function prev():void {

            if (hasPrev) {

                actualPage--;
                scrollIt();

            }

        }

        private function scrollIt():void {

            var layout:HorizontalLayout = thumbs.layout as HorizontalLayout;
            thumbs.dataGroup.horizontalScrollPosition = actualPage * (thumbs.width + layout.gap);

        }
        ]]>
    </fx:Script>

    <s:HGroup gap="10" verticalAlign="middle">

        <s:Button click="prev()">&lt;</s:Button>

        <s:List id="thumbs" width="160" height="38" contentBackgroundAlpha="0" borderVisible="false" dataProvider="{pics}">

            <s:layout>
                <s:HorizontalLayout gap="5"/>
            </s:layout>

            <s:itemRenderer>
                <fx:Component>
                    <s:ItemRenderer autoDrawBackground="false" useHandCursor="true" buttonMode="true">

                        <s:states>
                            <s:State name="normal" />
                            <s:State name="hovered" />
                            <s:State name="selected" />
                        </s:states>

                        <s:BorderContainer width="50" height="38" backgroundColor="0xffffff">
                            <mx:Image width="50" height="38" source="{data.p}" />开发者_Go百科
                        </s:BorderContainer>

                    </s:ItemRenderer>
                </fx:Component>
            </s:itemRenderer>

        </s:List>

        <s:Button click="next()">&gt;</s:Button>

    </s:HGroup>

</s:Application>

so everytime the list gets scrolled the thumbnails blink and I think is because they are downloading their images everytime the list gets updated.

What I need is just http://flowplayer.org/tools/scrollable/index.html ...

You can use Superimage by Ely Greenfield (sources are available from context menu).

Ok... another solution (thanks to http://www.tink.ws/blog/non-embedded-assets-spark-bitmapimage/):

<?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"
creationComplete="init()">

    <fx:Declarations>

        <s:ArrayCollection id="pics"> 
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p01.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m01.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g01.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p02.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m02.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g02.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p03.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m03.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g03.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p04.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m04.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g04.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p05.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m05.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g05.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p06.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m06.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g06.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p07.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m07.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g07.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p08.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m08.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g08.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p09.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m09.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g09.jpg"/>
            <fx:Object p="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/p10.jpg" m="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/m10.jpg" g="http://fotos.motorflash.com/fotos_anuncios/00/00/02/97/16/7/g10.jpg"/>
        </s:ArrayCollection>

    </fx:Declarations>

    <fx:Script>
        <![CDATA[
        import spark.layouts.HorizontalLayout;

        private var thumbsByPage:uint = 3;
        private var actualPage:uint = 0;
        private var firstPage:uint = 0;
        private var lastPage:uint = 0;

        private function init():void {

            thumbs.scroller.setStyle("verticalScrollPolicy", "none");
            thumbs.scroller.setStyle("horizontalScrollPolicy", "none");

            thumbs.selectedIndex = 0;
            actualPage = 0;
            lastPage = Math.ceil(thumbs.dataProvider.length / thumbsByPage);

        }

        public function get hasNext():Boolean {

            return actualPage < lastPage;

        }

        public function get hasPrev():Boolean {

            return actualPage > firstPage;

        }

        private function next():void {

            if (hasNext) {

                actualPage++;
                scrollIt();

            }

        }

        private function prev():void {

            if (hasPrev) {

                actualPage--;
                scrollIt();

            }

        }

        private function scrollIt():void {

            var layout:HorizontalLayout = thumbs.layout as HorizontalLayout;
            thumbs.dataGroup.horizontalScrollPosition = actualPage * (thumbs.width + layout.gap);

        }
        ]]>
    </fx:Script>

    <s:HGroup gap="10" verticalAlign="middle">

        <s:Button click="prev()">&lt;</s:Button>

        <s:List id="thumbs" width="160" height="38" contentBackgroundAlpha="0" borderVisible="false" dataProvider="{pics}">

            <s:layout>
                <s:HorizontalLayout gap="5"/>
            </s:layout>

            <s:itemRenderer>
                <fx:Component>
                    <s:ItemRenderer autoDrawBackground="false" useHandCursor="true" buttonMode="true" creationComplete="loader.load(data.p);">

                        <s:states>
                            <s:State name="normal" />
                            <s:State name="hovered" />
                            <s:State name="selected" />
                        </s:states>

                        <s:BorderContainer width="50" height="38" backgroundColor="0xffffff">
                            <mx:SWFLoader id="loader" complete="thumb.source=loader.content" includeInLayout="false" visible="false"/>
                            <s:BitmapImage id="thumb" width="50" height="38"/>
                        </s:BorderContainer>

                    </s:ItemRenderer>
                </fx:Component>
            </s:itemRenderer>

        </s:List>

        <s:Button click="next()">&gt;</s:Button>

    </s:HGroup>

</s:Application>

UPDATE:

Here it is, my component:Imagen...

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer backgroundColor="0xffffff"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![CDATA[

        import mx.events.*;
        import flash.events.*;
        import flash.display.*;

        private var _url:String;
        private var cache:Object;

        public function set url(v:String):void {

            _url = v;
            load();

        }

        public function get url():String {

            return _url;

        }

        private function load():void {

            try {

                if (cache[_url] != null) {

                    foto.source = cache[_url] as BitmapData;

                } else {

                    loader.load(_url);

                }

            } catch (error:Error) { };

        }

        private function init(event:FlexEvent):void {

            cache = new Object();
            load();

        }

        private function completeHandler(event:Event):void {

            cache[_url] = (loader.content as Bitmap).bitmapData;
            foto.source = loader.content;

        }

        private function ioErrorHandler(event:IOErrorEvent):void {}

        private function httpStatusHandler(event:HTTPStatusEvent):void {}
        ]]>
    </fx:Script>

    <mx:SWFLoader id="loader" includeInLayout="false" visible="false" creationComplete="init(event)" complete="completeHandler(event)" ioError="ioErrorHandler(event)" httpStatus="httpStatusHandler(event)" />
    <s:BitmapImage id="foto" width="100%" height="100%"/>

</s:BorderContainer>

maybe it could help someone... maybe someday I'll reach the 1000 points of reputation with this... maybe I'll finish this Flex project... dunno...