add lazyload

src/controls/thumbnails.js

@@ -1,6 +1,8 @@
 export default class Thumbnails {
   constructor(option) {
     this.option = option;
+    this.loading = false;
+    this.isLoad = false;
   }
 
   apply(art) {
@@ -15,8 +17,17 @@ export default class Thumbnails {
     } = this.art;
 
     proxy($progress, 'mousemove', event => {
-      this.option.$control.style.display = 'block';
-      this.showThumbnails(event);
+      if (!this.loading) {
+        this.loading = true;
+        this.load(this.art.option.thumbnails.url).then(() => {
+          this.isLoad = true;
+        });
+      }
+
+      if (this.isLoad) {
+        this.option.$control.style.display = 'block';
+        this.showThumbnails(event);
+      }
     });
 
     proxy($progress, 'mouseout', () => {
@@ -24,6 +35,22 @@ export default class Thumbnails {
     });
   }
 
+  load(url) {
+    const { proxy } = this.art.events;
+    return new Promise((resolve, reject) => {
+      const image = new Image();
+      image.src = url;
+
+      if (image.complete) {
+        return resolve(image);
+      }
+
+      proxy(image, 'load', () => resolve(image));
+
+      proxy(image, 'error', () => reject(image));
+    });
+  }
+
   showThumbnails(event) {
     const { $progress } = this.art.refs;
     const { width: posWidth } = this.getPosFromEvent(event);

src/style/artplayer.scss

@@ -1,5 +1,3 @@
-@charset "UTF-8";
-
 .artplayer-video-player {
     position: relative;
     width: 100%;
@@ -27,10 +25,4 @@
             fill: #fff;
         }
     }
-
-    &.artplayer-error {
-        .art-progress-indicator, .art-progress-tip {
-            display: none !important;
-        }
-    }
 }

src/style/bottom.scss

@@ -204,4 +204,10 @@
             visibility: visible;
         }
     }
+    
+    &.artplayer-error {
+        .art-progress-indicator, .art-progress-tip {
+            display: none !important;
+        }
+    }
 }