采用Image重复加载图片极大影响性能,并且占用大量内存,下面是我对比验证的代码。 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="loadImage()"> <mx:Button x="122" y="94" label="add Low memory Images" click="addLowMemImages()"/> <mx:Button x="22" y="94" label="add Images" click="addImages()"/> <mx:Script> <!--[CDATA[ import mx.controls.Image; private var pairImage:BitmapData=new BitmapData(100, 100, false, 0x000000FF); private function loadImage():void { var imageLoader:Loader=new Loader(); imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoadComplete); imageLoader.load(new URLRequest("pair.jpg")); } private function imageLoadComplete(event:Event):void { pairImage=event.target.content.bitmapData; } //低内存高性能方法 private function addLowMemImages():void { var canvas:Canvas; for (var i:int=0; i < 30; i++) { for (var j:int=0; j < 30; j++) { canvas=new Canvas(); canvas.width=40; canvas.height=40; canvas.x=50 * i; canvas.y=50 * j; canvas.graphics.beginBitmapFill(pairImage); canvas.graphics.drawRect(0, 0, 40, 40); canvas.graphics.beginFill(0xFF0000, 0.5); canvas.graphics.drawCircle(20, 20, 10); canvas.graphics.endFill(); images.addChild(canvas); } } } //慢且占内存高 private function addImages() { var canvas:Canvas; var img:Image; for (var i:int=0; i < 10; i++) { for (var j:int=0; j < 10; j++) { canvas=new Canvas(); canvas.width=40; canvas.height=40; canvas.x=50 * i; canvas.y=50 * j; img=new Image(); img.source="pair.jpg"; canvas.addChild(img); images.addChild(canvas); } } } ]]--> </mx:Script> <mx:Canvas id="images" width="100%" height="100%"> </mx:Canvas> </mx:Application>