add lazyload

src/controls/thumbnails.js

@@ -2,6 +2,7 @@ export default class Thumbnails {
   constructor(art, option) {
     this.art = art;
     this.option = option;
+    this.isLoad = false;
     this.init();
   }
 
@@ -12,8 +13,10 @@ export default class Thumbnails {
     } = this.art;
 
     proxy($progress, 'mousemove', event => {
-      this.option.ref.style.display = 'block';
-      this.showThumbnails(event);
+      this.checkLoad(this.art.option.thumbnails.url).then(() => {
+        this.option.ref.style.display = 'block';
+        this.showThumbnails(event);
+      });
     });
 
     proxy($progress, 'mouseout', () => {
@@ -21,6 +24,30 @@ export default class Thumbnails {
     });
   }
 
+  checkLoad(url) {
+    if (this.isLoad) {
+      return Promise.resolve(url);
+    }
+    const { proxy } = this.art.events;
+    return new Promise((resolve, reject) => {
+      const $img = new Image();
+      $img.src = url;
+      if ($img.complete) {
+        this.isLoad = true;
+        resolve(url);
+      }
+
+      proxy($img, 'load', () => {
+        this.isLoad = true;
+        resolve(url);
+      });
+
+      proxy($img, 'error', () => {
+        reject(url);
+      });
+    });
+  }
+
   showThumbnails(event) {
     const { $progress } = this.art.refs;
     const { width: posWidth } = this.getPosFromEvent(event);
@@ -29,6 +56,7 @@ export default class Thumbnails {
     const perIndex = Math.ceil(posWidth / perWidth);
     let yIndex = Math.ceil(perIndex / column);
     let xIndex = perIndex % column || column;
+
     this.option.ref.style.backgroundImage = `url(${url})`;
     this.option.ref.style.height = `${height}px`;
     this.option.ref.style.width = `${width}px`;

src/events.js

@@ -11,14 +11,9 @@ export default class Events {
     }
 
     target.addEventListener(name, callback, option);
-
-    const destroy = () => {
+    this.destroyEvents.push(() => {
       target.removeEventListener(name, callback, option);
-    };
-
-    this.destroyEvents.push(destroy);
-
-    return destroy;
+    });
   }
 
   destroy() {