diff --git a/CHANGELOG.md b/CHANGELOG.md
index 660dd206814b50f7946b4750584d4b2a8039993b..da1beb8a230160eb41ca82e0efe5037f90eeafc8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,10 @@
 # Amaze UI 1.x Change Log
 ---
 
+### 2014.12 W4
+
+- `IMPROVED` #294 Pureview 插件优化。
+
 ### 2014.12 W3
 
 **JS:**
diff --git a/docs/javascript/pureview.md b/docs/javascript/pureview.md
index 6b6a98b6dc80fd7246ca759ddbf695cf530ce297..4e5e06a99407fdb7f324448327daf1ef3f296f5a 100644
--- a/docs/javascript/pureview.md
+++ b/docs/javascript/pureview.md
@@ -7,10 +7,10 @@
 ## 使用演示
 
 ### 从链接中获取图片
-    
+
 `````html
 <ul data-am-widget="gallery" class="am-gallery sm-block-grid-2
-  md-block-grid-3 lg-block-grid-4 am-gallery-default" data-am-pureview="{target: 'a'}">
+  md-block-grid-3 lg-block-grid-4 am-gallery-default" data-am-pureview="{target: 'a'}" id="doc-pv-gallery">
   <li>
     <div class="am-gallery-item">
       <a href="http://amui.qiniudn.com/pure-1.jpg" title="远方 有一个地方 那里种有我们的梦想">
@@ -54,6 +54,26 @@
 </ul>
 `````
 
+`````html
+<button class="am-btn am-btn-primary" id="doc-pv-append">随机插入一个图片</button>
+`````
+
+<script>
+  $(function() {
+    var $gallery = $('#doc-pv-gallery');
+    var $items = $gallery.find('li');
+
+    $('#doc-pv-append').on('click', function() {
+      var random = Math.round(Math.random() * 3);
+      var $clone = $items.eq(random).clone();
+      $clone.find('a').removeAttr('data-am-pureviewed');
+      $clone.appendTo($gallery);
+
+      $gallery.trigger('changed:dom:amui');
+    });
+  });
+</script>
+
 ### 从 `data-rel` 中获取图片
 
 #### BT 的图片
diff --git a/js/ui.pureview.js b/js/ui.pureview.js
index 9ff0af3bf101895c0636b8480d5fc47bec8c99a0..56ff1cb86228fdb2aad0810b55957811c67e8606 100644
--- a/js/ui.pureview.js
+++ b/js/ui.pureview.js
@@ -42,8 +42,9 @@ define(function(require, exports, module) {
         '<ol class="am-pureview-nav"></ol>' +
         '<div class="am-pureview-bar am-active">' +
         '<span class="am-pureview-title"></span>' +
-        '<span class="am-pureview-current"></span> / ' +
-        '<span class="am-pureview-total"></span></div>' +
+        '<div class="am-pureview-counter">' +
+        '  <span class="am-pureview-current"></span> / ' +
+        '  <span class="am-pureview-total"></span></div></div>' +
         '<div class="am-pureview-actions am-active">' +
         '<a href="javascript: void(0)" class="am-icon-chevron-left" ' +
         'data-am-close="pureview"></a></div>' +
@@ -81,130 +82,87 @@ define(function(require, exports, module) {
   };
 
   PureView.prototype.init = function() {
-    var me = this;
+    var _this = this;
     var options = this.options;
     var $element = this.$element;
     var $pureview = this.$pureview;
-    var $slider = $pureview.find(options.selector.slider);
-    var $nav = $pureview.find(options.selector.nav);
-    var $slides = $([]);
-    var $navItems = $([]);
-    var $images = $element.find(options.target);
-    var total = $images.length;
-    var imgUrls = [];
-
-    if (!total) {
-      return;
-    }
-
-    if (total === 1) {
-      $pureview.addClass(options.className.onlyOne);
-    }
 
-    $images.each(function(i, item) {
-      var src;
-      var title;
-
-      if (options.target == 'a') {
-        src = item.href; // to absolute path
-        title = item.title || '';
-      } else {
-        src = $(item).data('rel') || item.src; // <img src='' data-rel='' />
-        title = $(item).attr('alt') || '';
-      }
-
-      // hide bar: wechat_webview_type=1
-      // http://tmt.io/wechat/  not working?
-      imgUrls.push(src);
-
-      $slides = $slides.add($('<li><div class="am-pinch-zoom">' +
-          '<img src="' + src + '" alt="' + title + '"/></div></li>'));
-      $navItems = $navItems.add($('<li>' + (i + 1) + '</li>'));
-    });
-
-    $slider.append($slides);
-    $nav.append($navItems);
+    this.refreshSlides();
 
     $('body').append($pureview);
 
-    $pureview.find(options.selector.total).text(total);
-
     this.$title = $pureview.find(options.selector.title);
     this.$current = $pureview.find(options.selector.current);
     this.$bar = $pureview.find(options.selector.bar);
     this.$actions = $pureview.find(options.selector.actions);
-    this.$navItems = $nav.find('li');
-    this.$slides = $slider.find('li');
 
     if (options.shareBtn) {
       this.$actions.append('<a href="javascript: void(0)" ' +
           'class="am-icon-share-square-o" data-am-toggle="share"></a>');
     }
 
-    $slider.find(options.selector.pinchZoom).each(function() {
-      $(this).data('amui.pinchzoom', new PinchZoom($(this), {}));
-      $(this).on('pz_doubletap', function(e) {
-        //
-      });
-    });
-
-    $images.on('click.pureview.amui', function(e) {
+    this.$element.on('click.pureview.amui', options.target, function(e) {
       e.preventDefault();
-      var clicked = $images.index(this);
+      var clicked = _this.$images.index(this);
 
       // Invoke WeChat ImagePreview in WeChat
       // TODO: detect WeChat before init
       if (options.weChatImagePreview && window.WeixinJSBridge) {
         window.WeixinJSBridge.invoke('imagePreview', {
-          current: imgUrls[clicked],
-          urls: imgUrls
+          current: _this.imgUrls[clicked],
+          urls: _this.imgUrls
         });
       } else {
-        me.open(clicked);
+        _this.open(clicked);
       }
     });
 
-    $pureview.find('.am-pureview-direction a').
-        on('click.direction.pureview.amui', function(e) {
-          e.preventDefault();
-          var $clicked = $(e.target).parent('li');
+    $pureview.find('.am-pureview-direction').
+      on('click.direction.pureview.amui', 'li', function(e) {
+        e.preventDefault();
 
-          if ($clicked.is('.am-pureview-prev')) {
-            me.prevSlide();
-          } else {
-            me.nextSlide();
-          }
-        });
+        if ($(this).is('.am-pureview-prev')) {
+          _this.prevSlide();
+        } else {
+          _this.nextSlide();
+        }
+      });
 
     // Nav Contorl
-    this.$navItems.on('click.nav.pureview.amui', function() {
-      var index = me.$navItems.index($(this));
-      me.activate(me.$slides.eq(index));
-    });
+    $pureview.find(options.selector.nav).on('click.nav.pureview.amui', 'li',
+      function() {
+        var index = _this.$navItems.index($(this));
+        _this.activate(_this.$slides.eq(index));
+      });
 
     // Close Icon
     $pureview.find(options.selector.close).
         on('click.close.pureview.amui', function(e) {
           e.preventDefault();
-          me.close();
+          _this.close();
         });
 
-    $slider.hammer().on('press.pureview.amui', function(e) {
+    this.$slider.hammer().on('press.pureview.amui', function(e) {
       e.preventDefault();
-      me.toggleToolBar();
+      _this.toggleToolBar();
     }).on('swipeleft.pureview.amui', function(e) {
       e.preventDefault();
-      me.nextSlide();
+      _this.nextSlide();
     }).on('swiperight.pureview.amui', function(e) {
       e.preventDefault();
-      me.prevSlide();
+      _this.prevSlide();
     });
 
-    $slider.data('hammer').get('swipe').set({
+    this.$slider.data('hammer').get('swipe').set({
       direction: Hammer.DIRECTION_HORIZONTAL,
       velocity: 0.35
     });
 
+    // NOTE:
+    // trigger `changed.dom.amui` manually
+    //   when new images appended, or call refreshSlides()
+    $element.on('changed:dom:amui', $.proxy(this.refreshSlides, _this));
+
     $(document).on('keydown.pureview.amui', $.proxy(function(e) {
       var keyCode = e.keyCode;
       if (keyCode == 37) {
@@ -217,6 +175,81 @@ define(function(require, exports, module) {
     }, this));
   };
 
+  PureView.prototype.refreshSlides = function() {
+    // update images collections
+    this.$images = this.$element.find(this.options.target);
+    var _this = this;
+    var options = this.options;
+    var $pureview = this.$pureview;
+    var $slides = $([]);
+    var $navItems = $([]);
+    var $images = this.$images;
+    var total = $images.length;
+    this.$slider = $pureview.find(options.selector.slider);
+    this.$nav = $pureview.find(options.selector.nav);
+    this.imgUrls = []; // for WeChat Image Preview
+    var viewedFlag = 'data-am-pureviewed';
+
+    if (!total) {
+      return;
+    }
+
+    if (total === 1) {
+      $pureview.addClass(options.className.onlyOne);
+    }
+
+    $images.not('[' + viewedFlag + ']').each(function(i, item) {
+      var src;
+      var title;
+
+      // get image URI from link's href attribute
+      if (item.nodeName === 'A') {
+        src = item.href; // to absolute path
+        title = item.title || '';
+      } else {
+        src = $(item).data('rel') || item.src; // <img src='' data-rel='' />
+        title = $(item).attr('alt') || '';
+      }
+
+      // add pureviewed flag
+      item.setAttribute(viewedFlag, '1');
+
+      // hide bar: wechat_webview_type=1
+      // http://tmt.io/wechat/  not working?
+      _this.imgUrls.push(src);
+
+      $slides = $slides.add($('<li data-src="' + src + '" data-title="' + title +
+      '"></li>'));
+      $navItems = $navItems.add($('<li>' + (i + 1) + '</li>'));
+    });
+
+    $pureview.find(options.selector.total).text(total);
+
+    this.$slider.append($slides);
+    this.$nav.append($navItems);
+    this.$navItems = this.$nav.find('li');
+    this.$slides = this.$slider.find('li');
+  };
+
+  PureView.prototype.loadImage = function($slide, callback) {
+    var appendedFlag = 'image-appended';
+
+    if (!$slide.data(appendedFlag)) {
+      var $img = $('<img>', {
+        src: $slide.data('src'),
+        alt: $slide.data('title')
+      });
+
+      $slide.html($img).wrapInner('<div class="am-pinch-zoom"></div>').redraw();
+
+      var $pinchWrapper = $slide.find(this.options.selector.pinchZoom);
+      $pinchWrapper.data('amui.pinchzoom', new PinchZoom($pinchWrapper[0], {}));
+      $slide.data('image-appended', true);
+    }
+
+    callback && callback.call(this);
+  };
+
   PureView.prototype.activate = function($slide) {
     var options = this.options;
     var $slides = this.$slides;
@@ -224,10 +257,6 @@ define(function(require, exports, module) {
     var alt = $slide.find('img').attr('alt') || '';
     var active = options.className.active;
 
-    UI.utils.imageLoader($slide.find('img'), function(image) {
-      $(image).addClass('am-img-loaded');
-    });
-
     if ($slides.find('.' + active).is($slide)) {
       return;
     }
@@ -236,6 +265,12 @@ define(function(require, exports, module) {
       return;
     }
 
+    this.loadImage($slide, function() {
+      UI.utils.imageLoader($slide.find('img'), function(image) {
+        $(image).addClass('am-img-loaded');
+      });
+    });
+
     this.transitioning = 1;
 
     this.$title.text(alt);
@@ -301,6 +336,7 @@ define(function(require, exports, module) {
 
   PureView.prototype.open = function(index) {
     var active = index || 0;
+    this.$pureview.show().redraw();
     this.checkScrollbar();
     this.setScrollbar();
     this.activate(this.$slides.eq(active));
@@ -315,12 +351,14 @@ define(function(require, exports, module) {
     this.$slides.removeClass();
 
     function resetBody() {
+      this.$pureview.hide();
       this.$body.removeClass(options.className.activeBody);
       this.resetScrollbar();
     }
 
     if (transition) {
-      this.$pureview.one(transition.end, $.proxy(resetBody, this));
+      this.$pureview.one(transition.end, $.proxy(resetBody, this)).
+        emulateTransitionEnd(300);
     } else {
       resetBody.call(this);
     }
diff --git a/less/ui.pureview.less b/less/ui.pureview.less
index 59f2a1de55b7269d686e93a73e6ef42ff95bf5b6..6518e51c7131d8767799cba3c284e3ef87369be1 100644
--- a/less/ui.pureview.less
+++ b/less/ui.pureview.less
@@ -21,14 +21,14 @@
   height: 100%;
   z-index: @z-index-pureview;
   background: rgba(0, 0, 0, 0.95);
-  //display: none;
+  display: none;
   overflow: hidden;
   -webkit-transition-property: -webkit-transform;
   -moz-transition-property: -moz-transform;
   -o-transition-property: -o-transform;
   transition-property: transform;
   .translate3d(0, 100%, 0);
-  .transition-duration(0.4s);
+  .transition-duration(.3s);
 
   &.am-active {
     .translate3d(0, 0, 0);
@@ -133,7 +133,7 @@
     z-index: 200;
     -webkit-user-drag: none;
     user-drag: none;
-    .transition(opacity .15s linear);
+    .transition(opacity .2s linear);
 
     &.am-img-loaded {
       opacity: 1;