2 Replies Latest reply on Apr 27, 2008 5:33 PM by ChiefRocka00

    Performance problem

      I am creating a site and the client has a project page that they want to load text and images into for each project. There are five to seven images per project. The page shows one image at full size and the others as thumbnails. The client also has the ability to add projects at anytime so I can't statically embed all the images into the code, I have to do something at run time but I have no idea what to do to make this perform better, it is extremely slow. Here is what I am doing in my code, any help would be greatly appreciated....

      Here is the code for my Canvas that is the project page:
      <mx:Canvas id="canvasProjectPage" width="100%">
      <mx:HBox width="100%" paddingLeft="0" height="420">
      <mx:VBox width="53%" height="100%" paddingLeft="0" paddingRight="0">
      <mx:ViewStack id="vsFullSizePics" width="100%" paddingTop="10" height="420">
      <mx:Canvas id="canvasPic1" width="100%" hideEffect="{fadeOut}" showEffect="{fadeIn}" >
      <mx:Image id="fullImage1" source="{fullImagePath1}" width="500" height="400"/>
      <mx:Canvas id="canvasPic2" width="100%" hideEffect="{fadeOut}" showEffect="{fadeIn}">
      <mx:Image id="fullImage2" source="{fullImagePath2}" width="500" height="400"/>
      <mx:Canvas id="canvasPic3" width="100%" hideEffect="{fadeOut}" showEffect="{fadeIn}">
      <mx:Image id="fullImage3" source="{fullImagePath3}" width="500" height="400"/>
      <mx:Canvas id="canvasPic4" width="100%" hideEffect="{fadeOut}" showEffect="{fadeIn}">
      <mx:Image id="fullImage4" source="{fullImagePath4}" width="500" height="400"/>
      <mx:Canvas id="canvasPic5" width="100%" hideEffect="{fadeOut}" showEffect="{fadeIn}">
      <mx:Image id="fullImage5" source="{fullImagePath5}" width="500" height="400"/>
      <mx:Canvas id="canvasPic6" width="100%" hideEffect="{fadeOut}" showEffect="{fadeIn}">
      <mx:Image id="fullImage6" source="{fullImagePath6}" width="500" height="400"/>
      <mx:Canvas id="canvasPic7" width="100%" hideEffect="{fadeOut}" showEffect="{fadeIn}">
      <mx:Image id="fullImage7" source="{fullImagePath7}" width="500" height="400"/>
      <mx:Spacer width="2%"/>
      <mx:VBox width="45%" horizontalAlign="center" verticalGap="0">
      <mx:Spacer width="100%" height="1"/>
      <mx:Label text="{projectName}" textAlign="left" fontWeight="bold" fontSize="16" width="100%"/>
      <mx:HBox width="100%" paddingBottom="0" paddingTop="0">
      <mx:Label text="City:" width="15%" fontWeight="bold"/>
      <mx:Label text="{projectCity}" width="85%"/>
      <mx:HBox width="100%" paddingBottom="0" paddingTop="0">
      <mx:Label text="Date:" width="15%" fontWeight="bold"/>
      <mx:Label text="{projectDate}" width="85%"/>
      <mx:HBox width="100%" paddingBottom="0" paddingTop="0">
      <mx:Label text="Size:" width="15%" fontWeight="bold"/>
      <mx:Label text="{projectBudget}" width="85%"/>
      <mx:TextArea editable="false" borderThickness="0" width="100%" height="290" backgroundAlpha="0">
      <mx:HBox width="450" horizontalAlign="left" buttonMode="true" mouseOver="event.currentTarget.useHandCursor=true;" horizontalGap="5">
      <mx:Image id="thumb1" source="{fullImagePath1}" width="50" height="40" click="showImage('1','1')"/>
      <mx:Image id="thumb2" source="{fullImagePath2}" width="50" height="40" click="showImage('1','2')"/>
      <mx:Image id="thumb3" source="{fullImagePath3}" width="50" height="40" click="showImage('1','3')"/>
      <mx:Image id="thumb4" source="{fullImagePath4}" width="50" height="40" click="showImage('1','4')"/>
      <mx:Image id="thumb5" source="{fullImagePath5}" width="50" height="40" click="showImage('1','5')"/>
      <mx:Image id="thumb6" source="{fullImagePath6}" width="50" height="40" click="showImage('1','6')"/>
      <mx:Image id="thumb7" source="{fullImagePath7}" width="50" height="40" click="showImage('1','7')"/>


      when a project is selected from the menu, I am calling an HTTPService request to get all the data and image paths and then I call a function called dbProcessProjectData which populates the project page, here is the code for this function.

      private function dbProcessProjectData(event:ResultEvent):void {
      if ( event.result.project != null ) {
      if ( projectName != null ) { blankOutProjectInfo(); }

      vsCanvasTypes.selectedChild = canvasProjectPage;

      projectName = event.result.project.title;
      projectCity = event.result.project.city;
      projectDate = event.result.project.projectDate;
      projectBudget = event.result.project.budget;
      projectData = event.result.project.projectData;
      projectElse = event.result.project.otherText;

      if ( event.result.project.image1 != null ) { fullImagePath1 = event.result.project.image1; }
      if ( event.result.project.image2 != null ) { fullImagePath2 = event.result.project.image2; }
      if ( event.result.project.image3 != null ) { fullImagePath3 = event.result.project.image3; }
      if ( event.result.project.image4 != null ) { fullImagePath4 = event.result.project.image4; }
      if ( event.result.project.image5 != null ) { fullImagePath5 = event.result.project.image5; }
      if ( event.result.project.image6 != null ) { fullImagePath6 = event.result.project.image6; }
      if ( event.result.project.image7 != null ) { fullImagePath7 = event.result.project.image7; }

      any performance help here would be greatly appreciated!!!!!!
        • 1. Re: Performance problem
          well the first question is : what is the size of the image files ?
          If each file is 500 Kb or more, it should be slow.
          If each file is less than 50 Kb it should not be slow.
          (with ADSL of course)
          • 2. Re: Performance problem
            ChiefRocka00 Level 1
            Wow, talk about me totally over complicating the analysis for the solution. When I looked at the file sizes for the images that were trying to be loaded they were 1.5 MB. I simply resized them and reuploaded and it loads very quickly. Thank you for the obvious reply that I completely overlooked originally.