Merge pull request cocos2d#3296 from zilongshanren/cache-base-image

Cache base 64 image of PageViewIndicator and ScrollViewBar

Author: pandamicro

extensions/ccui/system/UIHelper.js

@@ -160,5 +160,20 @@ ccui.helper = {
             height = 0.0;
         }
         return cc.rect(x, y, width, height);
+    },
+
+    _createSpriteFromBase64: function(base64String, key) {
+        var texture2D = cc.textureCache.getTextureForKey(key);
+
+        if(!texture2D) {
+            var image = new Image();
+            image.src = base64String;
+            cc.textureCache.cacheImage(key, image);
+            texture2D = cc.textureCache.getTextureForKey(key);
+        }
+
+        var sprite = new cc.Sprite(texture2D);
+
+        return sprite;
     }
 };

extensions/ccui/uiwidgets/scroll-widget/UIPageViewIndicator.js

@@ -55,10 +55,7 @@ ccui.PageViewIndicator = ccui.ProtectedNode.extend(/** @lends ccui.PageViewIndic
         this._spaceBetweenIndexNodes = ccui.PageViewIndicator.SPACE_BETWEEN_INDEX_NODES_DEFAULT;
         this._indexNodesColor = cc.color.WHITE;
 
-        var image =  new Image();
-        image.src = ccui.PageViewIndicator.CIRCLE_IMAGE;
-
-        this._currentIndexNode = new cc.Sprite(image);
+        this._currentIndexNode = ccui.helper._createSpriteFromBase64(ccui.PageViewIndicator.CIRCLE_IMAGE, ccui.PageViewIndicator.CIRCLE_IMAGE_KEY);
         this._currentIndexNode.setVisible(false);
         this.addProtectedChild(this._currentIndexNode, 1);
 
@@ -279,10 +276,7 @@ ccui.PageViewIndicator = ccui.ProtectedNode.extend(/** @lends ccui.PageViewIndic
 
         if(this._useDefaultTexture)
         {
-            var image =  new Image();
-            image.src = ccui.PageViewIndicator.CIRCLE_IMAGE;
-
-            indexNode = new cc.Sprite(image);
+            indexNode = ccui.helper._createSpriteFromBase64(ccui.PageViewIndicator.CIRCLE_IMAGE, ccui.PageViewIndicator.CIRCLE_IMAGE_KEY);
         }
         else
         {
@@ -342,4 +336,5 @@ cc.defineGetterSetter(_p, "spaceBetweenIndexNodes", _p.getSpaceBetweenIndexNodes
  * @ignore
  */
 ccui.PageViewIndicator.SPACE_BETWEEN_INDEX_NODES_DEFAULT = 23;
-ccui.PageViewIndicator.CIRCLE_IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAA8ElEQVRIx62VyRGCQBBF+6gWRCEmYDIQkhiBCgHhSclC8YqWzOV5oVzKAYZp3r1/9fpbxAIBMTsKrjx5cqVgR0wgLhCRUWOjJiPqD56xoaGPhpRZV/iSEy6crHmw5oIrF9b/lVeMofrJgjlnxlIy/wik+JB+mme8BExbBhm+5CJC2LE2LtSEQoyGWDioBA5CoRIohJtK4CYDxzNEM4GAugR1E9VjVC+SZpXvhCJCrjomESLvc17pDGX7bWmlh6UtpjPVCWy9zaJ0TD7qfm3pwERMz2trRVZk3K3BD/L34AY+dEDCniMVBkPFkT2J/b2/AIV+dRpFLOYoAAAAAElFTkSuQmCC";
+ccui.PageViewIndicator.CIRCLE_IMAGE_KEY = "/__circle_image";
+ccui.PageViewIndicator.CIRCLE_IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAA8ElEQVRIx62VyRGCQBBF+6gWRCEmYDIQkhiBCgHhSclC8YqWzOV5oVzKAYZp3r1/9fpbxAIBMTsKrjx5cqVgR0wgLhCRUWOjJiPqD56xoaGPhpRZV/iSEy6crHmw5oIrF9b/lVeMofrJgjlnxlIy/wik+JB+mme8BExbBhm+5CJC2LE2LtSEQoyGWDioBA5CoRIohJtK4CYDxzNEM4GAugR1E9VjVC+SZpXvhCJCrjomESLvc17pDGX7bWmlh6UtpjPVCWy9zaJ0TD7qfm3pwERMz2trRVZk3K3BD/L34AY+dEDCniMVBkPFkT2J/b2/AIV+dRpFLOYoAAAAAElFTkSuQmCC";

extensions/ccui/uiwidgets/scroll-widget/UIScrollViewBar.js

@@ -81,23 +81,17 @@ ccui.ScrollViewBar = ccui.ProtectedNode.extend(/** @lends ccui.ScrollViewBar# */
      * @returns {boolean}
      */
     init: function () {
-        var halfPixelImage = new Image();
-        halfPixelImage.src = ccui.ScrollViewBar.HALF_CIRCLE_IMAGE;
-
-        this._upperHalfCircle = new cc.Sprite(halfPixelImage);
+        this._upperHalfCircle = ccui.helper._createSpriteFromBase64(ccui.ScrollViewBar.HALF_CIRCLE_IMAGE, ccui.ScrollViewBar.HALF_CIRCLE_IMAGE_KEY);
         this._upperHalfCircle.setAnchorPoint(cc.p(0.5, 0));
 
-        this._lowerHalfCircle = new cc.Sprite(halfPixelImage);
+        this._lowerHalfCircle = ccui.helper._createSpriteFromBase64(ccui.ScrollViewBar.HALF_CIRCLE_IMAGE, ccui.ScrollViewBar.HALF_CIRCLE_IMAGE_KEY);
         this._lowerHalfCircle.setAnchorPoint(cc.p(0.5, 0));
         this._lowerHalfCircle.setScaleY(-1);
 
         this.addProtectedChild(this._upperHalfCircle);
         this.addProtectedChild(this._lowerHalfCircle);
 
-        var bodyImage = new Image();
-        bodyImage.src = ccui.ScrollViewBar.BODY_IMAGE_1_PIXEL_HEIGHT;
-
-        this._body =  new cc.Sprite(bodyImage);
+        this._body =  ccui.helper._createSpriteFromBase64(ccui.ScrollViewBar.BODY_IMAGE_1_PIXEL_HEIGHT, ccui.ScrollViewBar.BODY_IMAGE_1_PIXEL_HEIGHT_KEY);
         this._body.setAnchorPoint(cc.p(0.5, 0));
         this.addProtectedChild(this._body);
 
@@ -379,5 +373,7 @@ ccui.ScrollViewBar.DEFAULT_COLOR = cc.color(52, 65, 87);
 ccui.ScrollViewBar.DEFAULT_MARGIN = 20;
 ccui.ScrollViewBar.DEFAULT_AUTO_HIDE_TIME = 0.2;
 ccui.ScrollViewBar.DEFAULT_SCROLLBAR_OPACITY = 0.4;
+ccui.ScrollViewBar.HALF_CIRCLE_IMAGE_KEY = "/__half_circle_image";
 ccui.ScrollViewBar.HALF_CIRCLE_IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAGCAMAAADAMI+zAAAAJ1BMVEX///////////////////////////////////////////////////9Ruv0SAAAADHRSTlMABgcbbW7Hz9Dz+PmlcJP5AAAAMElEQVR4AUXHwQ2AQAhFwYcLH1H6r1djzDK3ASxUpTBeK/uTCyz7dx54b44m4p5cD1MwAooEJyk3AAAAAElFTkSuQmCC";
-ccui.ScrollViewBar.BODY_IMAGE_1_PIXEL_HEIGHT = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAABCAMAAADdNb8LAAAAA1BMVEX///+nxBvIAAAACklEQVR4AWNABgAADQABYc2cpAAAAABJRU5ErkJggg==";
+ccui.ScrollViewBar.BODY_IMAGE_1_PIXEL_HEIGHT_KEY = "/__body_image_height";
+ccui.ScrollViewBar.BODY_IMAGE_1_PIXEL_HEIGHT = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAABCAMAAADdNb8LAAAAA1BMVEX///+nxBvIAAAACklEQVR4AWNABgAADQABYc2cpAAAAABJRU5ErkJggg==";