增加默认Loading组件

Author: 李钿

src/components/ImageContainer.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import raf from 'raf';
 import tween from './tween.js'
+import Loading from './Loading'
 
 /**
  * 
@@ -467,7 +468,7 @@ class ImageContainer extends PureComponent {
         onTouchEnd={this.handleTouchEnd}
         style={defaultStyle}>
         {
-          isLoaded ? <img src={src} style={ImageStyle}/> : ''
+          isLoaded ? <img src={src} style={ImageStyle}/> : <Loading/>
         }
       </div>
     );

src/components/Loading.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const Loading = (props) => {
+  return (
+    <div className="viewer-image-loading">
+    </div>
+  );
+};
+
+export default Loading;

src/components/WxImageViewer.less

@@ -55,4 +55,29 @@
       }
     }
   }
+  .viewer-image-loading{
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 32px;
+    height: 32px;
+    box-sizing: border-box;
+    border-radius: 100%;
+    border-width: 4px;
+    border-style: solid;
+    border-color: #333;
+    border-bottom-color: #FFF;
+    animation: roll 1s linear infinite;
+  }
+  @keyframes roll{
+    from{
+      transform: rotate(0deg);
+    }
+    to{
+      transform: rotate(360deg);
+    }
+  }
 }