1.update: 抽离模板独立import;

2.fix: 抽离独立loading以修正快速滑动时,如果图片未加完,loading无法正常隐藏的BUG;:bug:

Author: KyLeoHC

demo/index.html

@@ -85,13 +85,13 @@
         // thumbnail: 缩略图的链接(非必传)
         // url: 原图的链接(必传)
         var images = [
-            {url: 'images/2.jpg'},
+            {url: 'thumbnails/2.jpg'},
             {thumbnail: 'thumbnails/3.jpg', url: 'images/3.jpg'},
             {thumbnail: 'thumbnails/4.jpg', url: 'images/4.jpg'},
             {thumbnail: 'thumbnails/5.jpg', url: 'images/5.jpg'},
             {thumbnail: 'thumbnails/6.jpg', url: 'images/6.jpg'},
             {thumbnail: 'thumbnails/7.jpg', url: 'images/7.jpg'},
-            {url: 'images/8.jpg'}
+            {url: 'thumbnails/8.jpg'}
         ];
         window.imageViewer = new ImageViewer(images, {
             container: 'body',

dist/imageViewer.common.js

@@ -36,6 +36,7 @@
     "eslint-plugin-node": "^6.0.1",
     "eslint-plugin-promise": "^3.7.0",
     "eslint-plugin-standard": "^3.1.0",
+    "html-loader": "^0.5.5",
     "postcss-loader": "^2.1.4",
     "style-loader": "^0.21.0",
     "stylus": "^0.54.5",

dist/imageViewer.min.js

@@ -17,6 +17,7 @@ import {isNumber, isPlainObject} from '../common/utils';
 import lock from '../common/lock';
 import Touch from './touch';
 import Viewer from './viewer';
+import template from '../html/template.html';
 
 const defaultImgOption = {thumbnail: '', url: ''};
 
@@ -32,7 +33,6 @@ class ImageViewer {
         this.animationEl = null;
         this.currentNumberEl = null;
         this.totalNumberEl = null;
-        this.loadingEl = null;
         this.images = images; // 图片数据
         this.imagesLength = images.length; // 图片数据
         this.container = opt.container || 'body';
@@ -52,31 +52,16 @@ class ImageViewer {
     _create() {
         this.el = query('.image-viewer')[0];
         this.destroy();
-        let imageViewerTemplate =
-            `<div class="image-viewer">
-                <div class="image-header"></div>
-                <div class="image-body">
-                    <div class="viewer-wrapper">
-                        <div class="viewer"><div class="panel"><img><span></span></div></div>
-                        <div class="viewer"><div class="panel"><img><span></span></div></div>
-                        <div class="viewer"><div class="panel"><img><span></span></div></div>     
-                    </div>
-                </div>
-                <div class="image-footer"></div>
-                <div class="image-animation hide"><img></div> 
-                <div class="ball-clip-rotate hide"><div></div></div>
-            </div>`;
 
         const divEl = document.createElement('div');
-        divEl.innerHTML = imageViewerTemplate;
+        divEl.innerHTML = template;
         this.el = divEl.firstElementChild;
         query(this.container)[0].appendChild(this.el);
         this.headerEl = query('.image-header', this.el)[0];
         this.bodyEl = query('.image-body', this.el)[0];
         this.footerEl = query('.image-footer', this.el)[0];
         this.viewerWrapperEl = query('.image-body .viewer-wrapper', this.el)[0];
         this.animationEl = query('.image-animation', this.el)[0];
-        this.loadingEl = query('.ball-clip-rotate', this.el)[0];
         this.itemList = this.viewerWrapperEl.children;
         this.width = this.el.clientWidth;
         this.height = this.el.clientHeight;
@@ -429,14 +414,6 @@ class ImageViewer {
         }
     }
 
-    showLoading() {
-        this.loadingEl.classList.remove('hide');
-    }
-
-    hideLoading() {
-        this.loadingEl.classList.add('hide');
-    }
-
     /**
      * 重置当前图片的缩放
      */

package-lock.json

@@ -25,6 +25,7 @@ class Viewer {
         this.panelEl = el.firstElementChild; // .panel类
         this.imageEl = query('img', this.el)[0];
         this.tipsEl = query('span', this.el)[0];
+        this.loadingEl = query('.ball-clip-rotate', this.el)[0];
         this.imageOption = null;
         this.index = index; // viewer排序用，记录原始的数组位置
         this.displayIndex = 0;
@@ -97,6 +98,7 @@ class Viewer {
         this.imageOption = imageOption;
         this.displayIndex = displayIndex;
 
+        this.hideLoading();
         if (needLoadLarge && this.src !== this.imageOption.url) {
             if (imageOption._hasLoadLarge) {
                 // 大图已加载好的情况下
@@ -105,23 +107,25 @@ class Viewer {
                 src = imageOption.thumbnail;
                 if (src) {
                     if (this.isActive()) {
-                        this.imageViewer.showLoading();
+                        this.showLoading();
                         window.requestAnimationFrame(() => {
                             // 缩略图存在的情况下，后台加载大图
                             this.loadImg(imageOption.url, () => {
                                 // 判断当前viewer的url是否和当时正在加载的图片一致
-                                // 因为存在可能图片尚未加载完用户就切换到下一张图片的情况
-                                if (this.src === imageOption.thumbnail && this.isActive()) {
-                                    this.imageViewer.hideLoading();
-                                    this._setImageUrl(imageOption.url);
-                                    success(true);
+                                if (this.src === imageOption.thumbnail) {
+                                    this.hideLoading();
+                                    if (this.isActive()) {
+                                        // 非当前所展示的图片，加载完之后不需要立即初始化尺寸
+                                        this._setImageUrl(imageOption.url);
+                                        success(true);
+                                    }
                                 }
-                                imageOption._hasLoadLarge = true;
                             }, () => {
-                                if (this.src === imageOption.thumbnail && this.isActive()) {
-                                    this.imageViewer.hideLoading();
-                                    fail(true);
+                                if (this.src === imageOption.thumbnail) {
+                                    this.hideLoading();
+                                    this.isActive() && fail(true);
                                 }
+                            }, () => {
                                 imageOption._hasLoadLarge = true;
                             });
                         });
@@ -155,14 +159,29 @@ class Viewer {
      * @param url
      * @param success
      * @param fail
+     * @param end
      */
-    loadImg(url = '', success, fail) {
+    loadImg(url = '', success, fail, end) {
         const img = new Image();
-        img.onload = () => success();
-        img.onerror = () => fail();
+        img.onload = () => {
+            success();
+            end();
+        };
+        img.onerror = () => {
+            fail();
+            end();
+        };
         img.src = url;
     }
 
+    showLoading() {
+        this.loadingEl.classList.remove('hide');
+    }
+
+    hideLoading() {
+        this.loadingEl.classList.add('hide');
+    }
+
     /**
      * 判断是否是当前所展示的viewer
      * @returns {boolean}