0 Replies Latest reply on Oct 14, 2012 9:17 PM by The_Milky_Way

    How to load image from local file system fast?

    The_Milky_Way

      Hi all,

      I'm developing an image viewer by AIR that it is same with window explorer by large icons mode. I'm using spark list with imageItemRenderer to load images. But the problem is that it's very slow and it's very easy not responding when the folder has many large images. Do you know what is best way to load image fast, I try to use FileStream, Loader.. but it's still slow. Here is my code ImageItemRenderer in spark List:

       

                                    private var _imgFile:ImageFile;

                                    private var myStream:FileStream;

       

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

                                    {

                                              super.data=value;

                                              img.unloadAndStop(false);

                                              if(data==null)

                                                        return;

       

                                              if(Global.imageDict[data.nativePath]) // using cache

                                              {

                                                             img.source=new Bitmap(Global.imageDict[data.nativePath]);

                                              }

                                              else

                                              {

                            img.load((data as File).nativePath);     

                           }

          

                                    }

       

                                    private function imageLoadComplete(event:Event):void

                                    {

                        

                                  var image:mx.controls.Image = event.target as mx.controls.Image;

                                                   data.width=image.content.width;

                                                   data.height=image.content.height;

                                                        var scaleFactor:Number = imgHeight / image.content.height;

                                                         var bitmapData : BitmapData = new BitmapData(image.content.width* scaleFactor, image.content.height * scaleFactor);

                                                         var matrix:Matrix = new Matrix();

                                                         matrix.scale(scaleFactor, scaleFactor); // scaling the image

                                                        bitmapData.draw(image.content,matrix);

                                                        Global.imageDict[data.nativePath]=bitmapData;

                                                        img.source=new Bitmap(bitmapData);

                            

                                    }

       

                          ]]>

                </fx:Script>

       

                <s:states>

                          <s:State name="normal" />

                          <s:State name="dragging" />

                          <s:State name="downAndSelected" />

                          <s:State name="selectedAndShowsCaret" />

                          <s:State name="hoveredAndShowsCaret" />

                          <s:State name="down" />

                          <s:State name="selected" />

                          <s:State name="hovered" />

                </s:states>

                <s:Rect width="100%" height="100%" radiusX="10">

                          <s:fill>

                                    <s:SolidColor color.normal="#9BBFEF" color.hovered="#228BCF"

                                                                    color.selectedAndShowsCaret="#FFDB5D" color.downAndSelected="#FFDB5D" color.selected="#FFDB5D"/>

                          </s:fill>

                </s:Rect>

                <s:VGroup width="100%" height="100%" horizontalAlign="center" paddingTop="10" verticalAlign="middle">

                          <mx:Image autoLoad="true"  id="img" scaleContent="true" maxWidth="{Global.THUMBNAIL_WIDTH}" maxHeight="{Global.THUMBNAIL_HEIGHT}"

                                               visible="true" includeInLayout="true" verticalAlign="middle" horizontalAlign="center" creationComplete="img.addEventListener(Event.COMPLETE,imageLoadComplete);"/>

           

                </s:VGroup>