♻️ Create plain <img> placeholders (#34379)

Where extensions would previously create `<amp-img>` placeholders, now create a plain `<img>` element with `loading="lazy"`
ampproject · May 20, 2021 · 9969ae6 · 9969ae6
1 parent 87e4d39
commit 9969ae6
Show file tree

Hide file tree

Showing 19 changed files with 124 additions and 139 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
@@ -32,8 +32,8 @@ import {
   observeWithSharedInOb,
   unobserveWithSharedInOb,
 } from '../../../src/viewport-observer';
+import {px, setStyles} from '../../../src/style';
 import {removeElement} from '../../../src/dom';
-import {setStyles} from '../../../src/style';
 
 /** @const */
 const TAG = 'amp-apester-media';
@@ -253,11 +253,10 @@ class AmpApesterMedia extends AMP.BaseElement {
    * @return {!Element}
    */
   constructLoaderImg_() {
-    const img = this.element.ownerDocument.createElement('amp-img');
+    const img = this.element.ownerDocument.createElement('img');
+    img.setAttribute('loading', 'lazy');
     img.setAttribute('src', this.loaderUrl_);
-    img.setAttribute('layout', 'fixed');
-    img.setAttribute('width', '100');
-    img.setAttribute('height', '100');
+    setStyles(img, {'width': px(100), 'height': px(100)});
     return img;
   }
 

diff --git a/extensions/amp-brid-player/0.1/amp-brid-player.js b/extensions/amp-brid-player/0.1/amp-brid-player.js
@@ -242,27 +242,29 @@ class AmpBridPlayer extends AMP.BaseElement {
 
     const {partnerID_: partnerID, feedID_: feedID} = this;
 
-    const placeholder = htmlFor(element)`
-      <amp-img referrerpolicy=origin layout=fill placeholder>
-        <amp-img referrerpolicy=origin layout=fill fallback
-            src="https://cdn.brid.tv/live/default/defaultSnapshot.png">
-        </amp-img>
-      </amp-img>`;
+    const html = htmlFor(element);
+    const placeholder = html`
+      <img placeholder referrerpolicy="origin" loading="lazy" />
+    `;
 
     this.propagateAttributes(['aria-label'], placeholder);
     this.applyFillContent(placeholder);
 
+    const altText = placeholder.hasAttribute('aria-label')
+      ? 'Loading video - ' + placeholder.getAttribute('aria-label')
+      : 'Loading video';
+
+    placeholder.setAttribute('alt', altText);
+
     placeholder.setAttribute(
       'src',
       `https://cdn.brid.tv/live/partners/${encodeURIComponent(partnerID)}` +
         `/snapshot/${encodeURIComponent(feedID)}.jpg`
     );
 
-    const altText = placeholder.hasAttribute('aria-label')
-      ? 'Loading video - ' + placeholder.getAttribute('aria-label')
-      : 'Loading video';
-
-    placeholder.setAttribute('alt', altText);
+    this.loadPromise(placeholder).catch(() => {
+      placeholder.src = 'https://cdn.brid.tv/live/default/defaultSnapshot.png';
+    });
 
     return placeholder;
   }

diff --git a/extensions/amp-brid-player/0.1/test/test-amp-brid-player.js b/extensions/amp-brid-player/0.1/test/test-amp-brid-player.js
@@ -216,13 +216,13 @@ describes.realWin(
           'data-player': '979',
           'data-video': '13663',
         }).then((brid) => {
-          const img = brid.querySelector('amp-img');
+          const img = brid.querySelector('img');
           expect(img).to.not.be.null;
           expect(img.getAttribute('src')).to.equal(
             'https://cdn.brid.tv/live/partners/264/snapshot/13663.jpg'
           );
-          expect(img.getAttribute('layout')).to.equal('fill');
-          expect(img.hasAttribute('placeholder')).to.be.true;
+          expect(img).to.have.class('i-amphtml-fill-content');
+          expect(img).to.have.attribute('placeholder');
           expect(img.getAttribute('alt')).to.equal('Loading video');
           expect(img.getAttribute('referrerpolicy')).to.equal('origin');
         });
@@ -234,30 +234,13 @@ describes.realWin(
           'data-video': '13663',
           'aria-label': 'great video',
         }).then((brid) => {
-          const img = brid.querySelector('amp-img');
+          const img = brid.querySelector('img');
           expect(img).to.not.be.null;
           expect(img.getAttribute('alt')).to.equal(
             'Loading video - great video'
           );
         });
       });
-      it('should create a fallback for default snapshot', () => {
-        return getBridPlayer({
-          'data-partner': '264',
-          'data-player': '979',
-          'data-video': '13663',
-        }).then((brid) => {
-          const img = brid.querySelector('amp-img');
-          const fallbackImg = img.querySelector('amp-img');
-          expect(fallbackImg).to.not.be.null;
-          expect(fallbackImg.getAttribute('src')).to.equal(
-            'https://cdn.brid.tv/live/default/defaultSnapshot.png'
-          );
-          expect(fallbackImg.getAttribute('layout')).to.equal('fill');
-          expect(fallbackImg.hasAttribute('fallback')).to.be.true;
-          expect(fallbackImg.getAttribute('referrerpolicy')).to.equal('origin');
-        });
-      });
     });
   }
 );
diff --git a/extensions/amp-delight-player/0.1/amp-delight-player.css b/extensions/amp-delight-player/0.1/amp-delight-player.css
@@ -16,10 +16,6 @@
 
 amp-delight-player [placeholder] {
   transition: opacity 0.5s ease-out;
-  background: no-repeat 50%;
-  background-size: cover;
-  width: 100%;
-  height: 100%;
 }
 
 amp-delight-player [placeholder].i-amphtml-delight-player-faded {

diff --git a/extensions/amp-delight-player/0.1/amp-delight-player.js b/extensions/amp-delight-player/0.1/amp-delight-player.js
@@ -235,12 +235,13 @@ class AmpDelightPlayer extends AMP.BaseElement {
   createPlaceholderCallback() {
     const html = htmlFor(this.element);
     const placeholder = html`
-      <div placeholder><amp-img layout="fill"></amp-img></div>
+      <img placeholder referrerpolicy="origin" loading="lazy" />
     `;
 
-    const src = `${this.baseURL_}/poster/${this.contentID_}`;
+    this.applyFillContent(placeholder);
 
-    placeholder.firstElementChild.setAttribute('src', src);
+    const src = `${this.baseURL_}/poster/${this.contentID_}`;
+    placeholder.setAttribute('src', src);
 
     this.placeholderEl_ = /** @type {HTMLElement} */ (placeholder);
 

diff --git a/extensions/amp-gfycat/0.1/amp-gfycat.js b/extensions/amp-gfycat/0.1/amp-gfycat.js
@@ -87,14 +87,11 @@ class AmpGfycat extends AMP.BaseElement {
 
   /** @override */
   createPlaceholderCallback() {
-    const placeholder = this.win.document.createElement('amp-img');
+    const placeholder = this.win.document.createElement('img');
     const videoid = dev().assertString(this.videoid_);
+    this.applyFillContent(placeholder);
     this.propagateAttributes(['alt', 'aria-label'], placeholder);
-    placeholder.setAttribute(
-      'src',
-      'https://thumbs.gfycat.com/' + encodeURIComponent(videoid) + '-poster.jpg'
-    );
-    placeholder.setAttribute('layout', 'fill');
+    placeholder.setAttribute('loading', 'lazy');
     placeholder.setAttribute('placeholder', '');
     placeholder.setAttribute('referrerpolicy', 'origin');
     if (this.element.hasAttribute('aria-label')) {
@@ -110,7 +107,10 @@ class AmpGfycat extends AMP.BaseElement {
     } else {
       placeholder.setAttribute('alt', 'Loading gif');
     }
-    this.applyFillContent(placeholder);
+    placeholder.setAttribute(
+      'src',
+      'https://thumbs.gfycat.com/' + encodeURIComponent(videoid) + '-poster.jpg'
+    );
 
     return placeholder;
   }

diff --git a/extensions/amp-gfycat/0.1/test/test-amp-gfycat.js b/extensions/amp-gfycat/0.1/test/test-amp-gfycat.js
@@ -129,8 +129,11 @@ describes.realWin(
       return getGfycat('LeanMediocreBeardeddragon', {
         withAlt: true,
       }).then((gfycat) => {
-        const placeHolder = gfycat.querySelector('amp-img');
+        const placeHolder = gfycat.querySelector('img');
         expect(placeHolder).to.not.be.null;
+        expect(placeHolder).to.have.attribute('placeholder');
+        expect(placeHolder).to.have.class('i-amphtml-fill-content');
+        expect(placeHolder.getAttribute('loading')).to.equal('lazy');
         expect(placeHolder.getAttribute('alt')).to.equal(
           'Loading gif test alt label'
         );
@@ -140,7 +143,7 @@ describes.realWin(
       return getGfycat('LeanMediocreBeardeddragon', {
         withAria: true,
       }).then((gfycat) => {
-        const placeHolder = gfycat.querySelector('amp-img');
+        const placeHolder = gfycat.querySelector('img');
         expect(placeHolder).to.not.be.null;
         expect(placeHolder.getAttribute('alt')).to.equal(
           'Loading gif test aria label'

diff --git a/extensions/amp-iframely/0.1/amp-iframely.js b/extensions/amp-iframely/0.1/amp-iframely.js
@@ -122,15 +122,17 @@ export class AmpIframely extends AMP.BaseElement {
         this.constructSrc_('/thumbnail'),
         this.options_
       );
-      return createElementWithAttributes(
+      const element = createElementWithAttributes(
         this.element.ownerDocument,
-        'amp-img',
+        'img',
         {
           'src': src,
+          'loading': 'lazy',
           'placeholder': '',
-          'layout': 'fill',
         }
       );
+      this.applyFillContent(element);
+      return element;
     }
     return null;
   }

diff --git a/extensions/amp-iframely/0.1/test/test-amp-iframely.js b/extensions/amp-iframely/0.1/test/test-amp-iframely.js
@@ -141,18 +141,16 @@ describes.realWin(
 
     it('renders image placeholder', () => {
       return renderIframely(paramsID).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         expect(image).to.not.be.null;
-        expect(image.tagName).to.equal('AMP-IMG');
-        expect(image.className).to.match(
-          /i-amphtml-element i-amphtml-notbuilt amp-notbuilt i-amphtml-layout-fill i-amphtml-layout-size-defined/
-        );
+        expect(image).to.have.class('i-amphtml-fill-content');
+        expect(image.getAttribute('loading')).to.equal('lazy');
       });
     });
 
     it('renders image placeholder with proper URL for ID version', () => {
       return renderIframely(paramsID).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         expect(image).to.not.be.null;
         expect(image.getAttribute('src')).to.equal(
           `https://cdn.iframe.ly/${TestID}/thumbnail?amp=1`
@@ -162,7 +160,7 @@ describes.realWin(
 
     it('renders image placeholder with proper URL for Key-URL version', () => {
       return renderIframely(paramsKU).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         expect(image).to.not.be.null;
         expect(image.getAttribute('src')).to.equal(
           `https://cdn.iframe.ly/api/thumbnail?url=${encodeURIComponent(
@@ -183,7 +181,7 @@ describes.realWin(
         'layout': 'responsive',
       };
       return renderIframely(data).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         expect(image).to.not.be.null;
         expect(image.getAttribute('src')).to.equal(
           `https://${properDomain}/${TestID}/thumbnail?amp=1`
@@ -203,7 +201,7 @@ describes.realWin(
         'layout': 'responsive',
       };
       return renderIframely(data).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         expect(image).to.not.be.null;
         expect(image.getAttribute('src')).to.equal(
           `https://${domain}/${TestID}/thumbnail?amp=1`
@@ -220,7 +218,7 @@ describes.realWin(
         'layout': 'fill',
       };
       return renderIframely(data).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         expect(image).to.not.be.null;
         expect(iframely.querySelector('iframe')).to.not.be.null;
       });
@@ -235,7 +233,7 @@ describes.realWin(
         'layout': 'responsive',
       };
       return renderIframely(data).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         expect(image).to.be.null;
         expect(iframely.querySelector('iframe')).to.not.be.null;
       });
@@ -251,7 +249,7 @@ describes.realWin(
         'layout': 'responsive',
       };
       return renderIframely(data).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         expect(image).to.not.be.null;
         expect(iframely.querySelector('iframe')).to.not.be.null;
       });
@@ -265,7 +263,7 @@ describes.realWin(
         'layout': 'fixed',
       };
       return renderIframely(data).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         expect(image).to.be.null;
         expect(iframely.querySelector('iframe')).to.not.be.null;
       });
@@ -280,7 +278,7 @@ describes.realWin(
         'layout': 'fixed',
       };
       return renderIframely(data).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         expect(image).to.be.null;
         expect(iframely.querySelector('iframe')).to.not.be.null;
       });
@@ -296,7 +294,7 @@ describes.realWin(
         'layout': 'responsive',
       };
       return renderIframely(data).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         expect(image).to.not.be.null;
         expect(iframely.querySelector('iframe')).to.not.be.null;
       });
@@ -311,7 +309,7 @@ describes.realWin(
         'layout': 'fixed',
       };
       return renderIframely(data).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         expect(image).to.not.be.null;
         expect(iframely.querySelector('iframe')).to.not.be.null;
       });
@@ -325,7 +323,7 @@ describes.realWin(
         'resizable': '',
       };
       return renderIframely(data).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         expect(image).to.be.null;
         expect(iframely.querySelector('iframe')).to.not.be.null;
       });
@@ -340,7 +338,7 @@ describes.realWin(
         'layout': 'responsive',
       };
       return renderIframely(data).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         expect(image).to.be.null;
         expect(iframely.querySelector('iframe')).to.not.be.null;
       });
@@ -372,7 +370,7 @@ describes.realWin(
         'layout': 'responsive',
       };
       return renderIframely(data).then((iframely) => {
-        const image = iframely.querySelector('amp-img');
+        const image = iframely.querySelector('img');
         const iframe = iframely.querySelector('iframe');
         expect(image).to.not.be.null;
         expect(iframe).to.not.be.null;

diff --git a/extensions/amp-jwplayer/0.1/amp-jwplayer.js b/extensions/amp-jwplayer/0.1/amp-jwplayer.js
@@ -348,15 +348,9 @@ class AmpJWPlayer extends AMP.BaseElement {
     if (!this.element.hasAttribute('data-media-id')) {
       return;
     }
-    const placeholder = this.win.document.createElement('amp-img');
+    const placeholder = this.win.document.createElement('img');
     this.propagateAttributes(['aria-label'], placeholder);
-    placeholder.setAttribute(
-      'src',
-      'https://content.jwplatform.com/thumbs/' +
-        encodeURIComponent(this.contentid_) +
-        '-720.jpg'
-    );
-    placeholder.setAttribute('layout', 'fill');
+    this.applyFillContent(placeholder);
     placeholder.setAttribute('placeholder', '');
     placeholder.setAttribute('referrerpolicy', 'origin');
     if (placeholder.hasAttribute('aria-label')) {
@@ -367,6 +361,13 @@ class AmpJWPlayer extends AMP.BaseElement {
     } else {
       placeholder.setAttribute('alt', 'Loading video');
     }
+    placeholder.setAttribute('loading', 'lazy');
+    placeholder.setAttribute(
+      'src',
+      'https://content.jwplatform.com/thumbs/' +
+        encodeURIComponent(this.contentid_) +
+        '-720.jpg'
+    );
     return placeholder;
   }