imagepreview md

src/assets/styles/common-component.less

@@ -47,7 +47,7 @@
   &-imgs {
     position: absolute;
     width: 600px;
-    box-shadow: 0px 24px 36px 0px rgba(0, 0, 0, 0.3);
+    // box-shadow: 0px 24px 36px 0px rgba(0, 0, 0, 0.3);
     cursor: move;
     transition: width, height, transform 0.2s linear;
     z-index: 8;
@@ -118,6 +118,30 @@
     }
   }
 
+  &-loading {
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    top: 50%;
+    left: 50%;
+    margin: -30px 0 0 -30px;
+    color: @mainColor;
+    font-size: 50px;
+    text-align: center;
+    line-height: 60px;
+    z-index: 99;
+  }
+
+  &-preload {
+    position: absolute;
+    z-index: 9;
+    width: 100px;
+    height: 100px;
+    overflow: hidden;
+    top: -1000px;
+    left: -1000px;
+  }
+
   // view-ui
   .ivu-modal-content {
     background: transparent;

src/components/common/ImagePreview/ImagePreview.vue

@@ -16,7 +16,7 @@
     <div :class="[`${prefixCls}-header`]" v-if="!headerHide">
       <h3>{{ curFile.name }}</h3>
       <div :class="[`${prefixCls}-index`]">
-        {{ this.curIndex + 1 }} / {{ this.lastIndex }}
+        {{ this.curIndex + 1 }} / {{ this.lastIndex + 1 }}
       </div>
     </div>
     <div :class="[`${prefixCls}-body`]" ref="ReviewBody">
@@ -39,6 +39,7 @@
         ]"
         :style="styles"
         v-move-ele.prevent="{ mouseMove }"
+        v-show="!loading"
       >
         <img :src="curFile.url" :alt="curFile.name" ref="PreviewImgDetail" />
       </div>
@@ -71,6 +72,13 @@
         </li>
       </ul>
     </div>
+
+    <div :class="[`${prefixCls}-loading`]" v-show="loading">
+      <Icon class="ivu-load-loop" type="ios-loading" />
+    </div>
+    <div :class="[`${prefixCls}-preload`]">
+      <img v-for="(img, pindex) in preLoadFiles" :key="pindex" :src="img.url" />
+    </div>
   </Modal>
 </template>
 
@@ -118,6 +126,9 @@ export default {
         scale: 1,
         rotate: 0
       },
+      preLoadFiles: [],
+      loading: false,
+      loadingSetT: null,
       nosition: false
     };
   },
@@ -126,10 +137,10 @@ export default {
       return this.curIndex === 0;
     },
     isLast() {
-      return this.lastIndex - 1 === this.curIndex;
+      return this.lastIndex === this.curIndex;
     },
     lastIndex() {
-      return this.imageList.length;
+      return this.imageList.length - 1;
     }
   },
   // watch: {
@@ -157,10 +168,13 @@ export default {
       const index = val || 0;
       this.nosition = true;
       this.curFile = this.imageList[index];
+      this.setPreloadFiles(index);
+      this.loadingSetT = setTimeout(() => {
+        this.loading = true;
+      }, 100);
     },
     registfileLoad() {
       const imgDom = this.$refs.PreviewImgDetail;
-
       imgDom.onload = () => {
         const { naturalWidth, naturalHeight } = imgDom;
         const imageSize = this.getImageSizePos({
@@ -186,11 +200,30 @@ export default {
           scale: 1,
           rotate: 0
         };
+        if (this.loadingSetT) clearTimeout(this.loadingSetT);
+        this.loading = false;
         setTimeout(() => {
           this.nosition = false;
         }, 100);
       };
     },
+    setPreloadFiles(curIndex) {
+      let preLoadIndexs = [];
+      if (this.loop) {
+        preLoadIndexs = [
+          curIndex === 0 ? this.lastIndex : curIndex - 1,
+          curIndex === this.lastIndex ? 0 : curIndex + 1
+        ];
+      } else {
+        preLoadIndexs = [
+          curIndex === 0 ? null : curIndex - 1,
+          curIndex === this.lastIndex ? null : curIndex + 1
+        ];
+      }
+      this.preLoadFiles = preLoadIndexs
+        .filter(item => item !== null)
+        .map(item => this.imageList[item]);
+    },
     getImageSizePos({ win, img, rotate }) {
       const imageSize = {
         width: 0,
@@ -236,7 +269,7 @@ export default {
     showPrev() {
       if (this.isFirst) {
         if (this.loop) {
-          this.curIndex = this.lastIndex - 1;
+          this.curIndex = this.lastIndex;
         } else {
           this.$emit("on-page-prev");
           return;
@@ -308,16 +341,16 @@ export default {
         left: imageSize.left + "px"
       });
       // 360度无缝切换到0度
-      setTimeout(() => {
-        if (this.transform.rotate >= 360) {
+      if (this.transform.rotate >= 360) {
+        setTimeout(() => {
           this.nosition = true;
           this.transform.rotate = 0;
           this.setStyleTransform();
           setTimeout(() => {
             this.nosition = false;
           }, 100);
-        }
-      }, 200);
+        }, 200);
+      }
     }
   }
 };