Deferred build mode

ampproject · Feb 4, 2021 · 8329d8f · 8329d8f
1 parent 43b4dd4
commit 8329d8f
Show file tree

Hide file tree

Showing 16 changed files with 1,609 additions and 172 deletions.
diff --git a/builtins/amp-img.js b/builtins/amp-img.js
@@ -45,6 +45,21 @@ const ATTRIBUTES_TO_PROPAGATE = [
 ];
 
 export class AmpImg extends BaseElement {
+  /** @override */
+  static V2() {
+    return true;
+  }
+
+  /** @override */
+  static deferredBuild() {
+    return true;
+  }
+
+  /** @override */
+  static prerenderAllowed() {
+    return true;
+  }
+
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
@@ -104,6 +119,10 @@ export class AmpImg extends BaseElement {
       if (!IS_ESM) {
         guaranteeSrcForSrcsetUnsupportedBrowsers(this.img_);
       }
+
+      if (AmpImg.V2() && !this.img_.complete) {
+        this.onLoadState('loading');
+      }
     }
   }
 
@@ -261,6 +280,34 @@ export class AmpImg extends BaseElement {
     return false;
   }
 
+  /** @override */
+  buildCallback() {
+    if (AmpImg.V2()) {
+      this.onLoadState('loading');
+      this.initialize_();
+      const img = dev().assertElement(this.img_);
+      // QQQQ: reset onLoadState() when src changes
+      if (img.complete) {
+        this.onLoadState('complete');
+        this.hideFallbackImg_();
+      }
+      listen(img, 'load', () => {
+        this.onLoadState('complete');
+        this.hideFallbackImg_();
+      });
+      listen(img, 'error', (reason) => {
+        this.onLoadState('error', reason);
+        this.onImgLoadingError_();
+      });
+    }
+  }
+
+  /** @override */
+  ensureLoaded() {
+    const img = dev().assertElement(this.img_);
+    img.loading = 'eager';
+  }
+
   /** @override */
   layoutCallback() {
     this.initialize_();

diff --git a/examples/loader-bento.amp.html b/examples/loader-bento.amp.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Lorem Ipsum | PublisherName</title>
+  <link rel="canonical" href="https://medium.com/p/cb7f223fad86" >
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <script>
+    (self.AMP = self.AMP || []).push(function(AMP) {
+      AMP.toggleExperiment('bento', true, true);
+    });
+  </script>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-1.0.js"></script>
+  <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-1.0.js"></script>
+
+  <style amp-custom>
+    body {
+      margin: 0;
+      font-family: 'Georgia', Serif;
+      background: white;
+    }
+
+  </style>
+  <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
+</head>
+<body>
+  <!--
+  <div style="height: 500vh">scroll</div>
+  -->
+
+  <!--
+  -->
+  <amp-img id="hero-img"
+      src="img/[email protected]"
+      srcset="img/[email protected] 1x, img/[email protected] 2x"
+      layout="responsive" width="360"
+      height="216"
+      noprerender>
+    <script>
+      //debugger;//QQQQQQ
+    </script>
+  </amp-img>
+
+  <!--
+  <amp-video id="video1"
+    src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
+    width="358"
+    height="204"
+    layout="responsive"
+    controls>
+    <script>
+      //debugger;//QQQQQQ
+    </script>
+  </amp-video>
+  -->
+
+  <!--
+  <amp-iframe id="iframe1"
+      width=300 height=300
+      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+      layout="responsive"
+      frameborder="0"
+      src="http://ads.localhost:8000/extensions/amp-iframe/0.1/storybook/iframe.html">
+    <div placeholder></div>
+  </amp-iframe>
+  -->
+
+  <!--
+  <amp-carousel id="carousel1" width=400 height=300 layout=fixed type=slides>
+    <amp-img id="hero-img"
+        src="img/[email protected]"
+        srcset="img/[email protected] 1x, img/[email protected] 2x"
+        layout="responsive" width="360"
+        height="216">
+    </amp-img>
+    <amp-video id="video1"
+      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
+      width="358"
+      height="204"
+      layout="responsive"
+      controls></amp-video>
+    <amp-instagram id="insta1"
+        width=300 height=300
+        layout="responsive"
+        data-shortcode="B8QaZW4AQY_">
+    </amp-instagram>
+  </amp-carousel>
+  -->
+
+  <div style="height: 2000vh">scroll</div>
+</body>
+</html>
diff --git a/examples/loader.amp.html b/examples/loader.amp.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Lorem Ipsum | PublisherName</title>
+  <link rel="canonical" href="https://medium.com/p/cb7f223fad86" >
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
+
+  <style amp-custom>
+    body {
+      margin: 0;
+      font-family: 'Georgia', Serif;
+      background: white;
+    }
+
+  </style>
+  <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
+  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+</head>
+<body>
+  <!--
+  <div style="height: 500vh">scroll</div>
+  -->
+
+  <!--
+  <amp-img id="hero-img"
+      src="img/[email protected]"
+      srcset="img/[email protected] 1x, img/[email protected] 2x"
+      layout="responsive" width="360"
+      height="216"
+      noprerender_>
+    <script>
+      //debugger;//QQQQQQ
+    </script>
+  </amp-img>
+  -->
+
+  <!--
+  <amp-video id="video1"
+    src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
+    width="358"
+    height="204"
+    layout="responsive"
+    controls>
+    <script>
+      //debugger;//QQQQQQ
+    </script>
+  </amp-video>
+  -->
+
+  <!--
+  -->
+  <amp-iframe id="iframe1"
+      width=300 height=100
+      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+      layout="responsive"
+      frameborder="0"
+      src="http://ads.localhost:8000/extensions/amp-iframe/0.1/storybook/iframe.html"
+      resizable>
+    <div placeholder></div>
+    <div overflow>overflow</div>
+  </amp-iframe>
+
+  <!--
+  <amp-carousel id="carousel1" width=400 height=300 layout=fixed type=slides>
+    <amp-img id="hero-img"
+        src="img/[email protected]"
+        srcset="img/[email protected] 1x, img/[email protected] 2x"
+        layout="responsive" width="360"
+        height="216">
+    </amp-img>
+    <amp-video id="video1"
+      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
+      width="358"
+      height="204"
+      layout="responsive"
+      controls></amp-video>
+    <amp-iframe id="iframe1"
+        width=300 height=300
+        sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+        layout="responsive"
+        frameborder="0"
+        src="http://ads.localhost:8000/extensions/amp-iframe/0.1/storybook/iframe.html">
+      <div placeholder></div>
+    </amp-iframe>
+  </amp-carousel>
+  -->
+
+  <!--
+  -->
+  <div style="height: 2000vh">scroll</div>
+</body>
+</html>