custom loader for <amp-apester> (ampproject#6627)

Lith · Dec 22, 2016 · 0c239ed · 0c239ed
1 parent 887fa3e
commit 0c239ed
Showing 1 changed file with 27 additions and 0 deletions.
diff --git a/extensions/amp-apester-media/0.1/amp-apester-media.js b/extensions/amp-apester-media/0.1/amp-apester-media.js
@@ -51,6 +51,9 @@ class AmpApesterMedia extends AMP.BaseElement {
         this.iframe_.contentWindow./*OK*/postMessage('interaction seen', '*');
       }
     }
+    if (this.getPlaceholder() && !this.ready_) {
+      this.togglePlaceholder(inViewport);
+    }
   }
 
   /** @override */
@@ -81,6 +84,11 @@ class AmpApesterMedia extends AMP.BaseElement {
      */
     this.displayBaseUrl_ = 'https://display.apester.com';
 
+    /**
+     * @const @private {string}
+     */
+    this.loaderUrl_ = 'https://images.apester.com/images%2Floader.gif';
+
     /**
      * @private {boolean}
      */
@@ -111,6 +119,11 @@ class AmpApesterMedia extends AMP.BaseElement {
      * @private {boolean}
      */
     this.seen_ = false;
+
+    /**
+     * @private {boolean}
+     */
+    this.ready_ = false;
   }
 
   /** @override */
@@ -203,6 +216,7 @@ class AmpApesterMedia extends AMP.BaseElement {
           return undefined;
         }).then(media => {
           this.togglePlaceholder(false);
+          this.ready_ = true;
           const height = 0 || media.data.size.height;
           if (height != this.height_) {
             this.height_ = height;
@@ -211,6 +225,19 @@ class AmpApesterMedia extends AMP.BaseElement {
         });
   }
 
+  /** @override */
+  createPlaceholderCallback() {
+    const img = this.element.ownerDocument.createElement('amp-img');
+    const placeholder = this.element.ownerDocument.createElement('div');
+    placeholder.setAttribute('placeholder', '');
+    placeholder.className = 'amp-apester-loader';
+    img.setAttribute('src', this.loaderUrl_);
+    img.setAttribute('layout', 'fill');
+    img.setAttribute('noloading', '');
+    placeholder.appendChild(img);
+    return placeholder;
+  }
+
   /** @override */
   unlayoutOnPause() {
     return true;