Define with customElements.define()

lazyload-image.html

@@ -7,14 +7,38 @@
  * Copyright 1000ch
  * licensed under the MIT license.
  */
-window.LazyloadImage = (function () {
-  'use strict';
+class LazyloadImage extends Image {
+  constructor(width, height) {
+    super(width, height);
 
-  const FALLBACK_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==';
-  const LazyloadImagePrototype = Object.create(HTMLImageElement.prototype);
-  const DEFAULT_OFFSET = 0;
+    this.original = this.currentSrc || this.src;
+    this.src = LazyloadImage.FALLBACK_IMAGE;
+    this.offset = Number(this.getAttribute('offset')) || 0;
+    this.visibleChanged = this.visibleChanged.bind(this);
+    this.observer = new IntersectionObserver(this.visibleChanged, {
+      rootMargin: `${this.offset}px`
+    });
+  }
+
+  static get FALLBACK_IMAGE() {
+    return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==';
+  }
+
+  static get observedAttributes() {
+    return [
+      'offset'
+    ];
+  }
+
+  connectedCallback() {
+    this.observer.observe(this);
+  }
+
+  disconnectedCallback() {
+    this.observer.unobserve(this);
+  }
 
-  LazyloadImagePrototype.visibleChanged = function(changes) {
+  visibleChanged(changes) {
     for (let change of changes) {
       let intersectionRect = change.intersectionRect;
       if (intersectionRect.height * intersectionRect.width > 0) {
@@ -23,34 +47,30 @@
         });
         this.addEventListener('error', () => {
           this.removeAttribute('srcset');
-          this.src = FALLBACK_IMAGE;
+          this.src = LazyloadImage.FALLBACK_IMAGE;
           this.observer.unobserve(this);
         });
         this.src = this.original;
+        break;
       }
     }
-  };
+  }
 
-  LazyloadImagePrototype.createdCallback = function() {
-    this.original = this.currentSrc || this.src;
-    this.src = FALLBACK_IMAGE;
-    this.offset = Number(this.getAttribute('offset')) || DEFAULT_OFFSET;
-    this.observer = new IntersectionObserver(this.visibleChanged.bind(this), {
-      rootMargin: `${this.offset}px`
-    });
-  };
-
-  LazyloadImagePrototype.attachedCallback = function() {
-    this.observer.observe(this);
-  };
-
-  LazyloadImagePrototype.detachedCallback = function() {
-    this.observer.unobserve(this);
-  };
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'offset':
+        this.offset = newValue;
+        this.observer.unobserve(this);
+        this.observer = new IntersectionObserver(this.visibleChanged, {
+          rootMargin: `${this.offset}px`
+        });
+        this.observer.observe(this);
+        break;
+    }
+  }
+}
 
-  return document.registerElement('lazyload-image', {
-    prototype: LazyloadImagePrototype,
-    extends: 'img'
-  });
-})();
+customElements.define('lazyload-image', LazyloadImage, {
+  extends: 'img'
+});
 </script>