Add PureView image loading icon

js/core.js

@@ -358,6 +358,34 @@ define(function(require, exports, module) {
         return scrollbarWidth;
     };
 
+    UI.utils.imageLoader = function($image, callback) {
+        function loaded() {
+            callback($image[0]);
+        }
+
+        function bindLoad() {
+            this.one('load', loaded);
+            if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
+                var src = this.attr('src'),
+                    param = src.match(/\?/) ? '&' : '?';
+
+                param += 'random=' + (new Date()).getTime();
+                this.attr('src', src + param);
+            }
+        }
+
+        if (!$image.attr('src')) {
+            loaded();
+            return;
+        }
+
+        if ($image[0].complete || $image[0].readyState === 4) {
+            loaded();
+        } else {
+            bindLoad.call($image);
+        }
+    };
+
     $(function() {
         var $body = $('body');
 

js/ui.pureview.js

@@ -209,6 +209,10 @@ define(function(require, exports, module) {
             activeIndex = $slides.index($slide),
             alt = $slide.find('img').attr('alt') || '',
             active = options.className.active;
+        
+        UI.utils.imageLoader($slide.find('img'), function(image) {
+            $(image).addClass('am-img-loaded');
+        });
 
         if ($slides.find('.' + active).is($slide)) return;
 
@@ -343,5 +347,4 @@ define(function(require, exports, module) {
 // TODO: 1. 动画改进
 //       2. 改变图片的时候恢复 Zoom
 //       3. 选项
-//       4. 关闭以后滚动条位置处理
-//       5. 增加图片加载动画
\ No newline at end of file
+//       4. 图片高度问题：由于 PinchZoom 的原因，过高的图片如果设置看了滚动，则放大以后显示不全
\ No newline at end of file

less/ui.pureview.less

@@ -84,17 +84,39 @@
   .am-pinch-zoom {
     position: relative;
     width: 100%;
+    // overflow-y: auto;  /* scrollable */
+    // -webkit-overflow-scrolling: touch; /* scrollable */
     .flexbox();
     .justify-content(center);
     .align-items(center);
+
+    &:after {
+      .am-icon-font();
+      content: @fa-var-spinner;
+      .am-icon-spin;
+      font-size: 24px;
+      color: #eee;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-left: -12px;
+      margin-top: -12px;
+      z-index: 1;
+    }
   }
 
   img {
     display: block;
     // width: 100%;
-    // height: auto;
     max-width: 100%;
     max-height: 100%;
+    opacity: 0;
+    z-index: 2;
+    .transition(opacity .15s ease-in);
+
+    &.am-img-loaded {
+      opacity: 1;
+    }
   }
 }
 
@@ -129,7 +151,7 @@
 
     &:before {
       .am-icon-font;
-      content: @fa-var-chevron-left;
+      content: @fa-var-chevron-circle-left;
       line-height: 36px;
       font-size: 24px;
     }
@@ -147,7 +169,7 @@
     right: 15px;
 
     a:before {
-      content: @fa-var-chevron-right;
+      content: @fa-var-chevron-circle-right;
     }
   }
 
@@ -249,6 +271,10 @@
   }
 }
 
+[data-am-pureview] img {
+  cursor: pointer;
+}
+
 // body
 .am-pureview-active {
   overflow: hidden;