Merge pull request #176 from kaliber5/delay-src

Delay setting src attribute after <img> is in DOM to prevent extraneous image loading

addon/components/responsive-image.hbs

@@ -21,5 +21,6 @@
       (if this.showLqipBlurhash (hash background-image=this.lqipBlurhash background-size="cover"))
     }}
     {{on "load" this.onLoad}}
+    {{did-insert this.setRendered}}
   />
 </picture>

addon/components/responsive-image.ts

@@ -19,6 +19,8 @@ declare global {
   const __eri_blurhash: {
     bh2url: (hash: string, width: number, height: number) => string | undefined;
   };
+
+  const FastBoot: unknown;
 }
 
 interface ResponsiveImageComponentArgs {
@@ -59,6 +61,9 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
   @tracked
   isLoaded = false;
 
+  @tracked
+  isRendered = false;
+
   constructor(owner: unknown, args: ResponsiveImageComponentArgs) {
     super(owner, args);
     assert('No image argument supplied for <ResponsiveImage>', args.src);
@@ -151,7 +156,11 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
    * the image source which fits at best for the size and screen
    */
   get src(): string | undefined {
-    return this.imageMeta
+    // We *must not* set the src attribute before the <img> is actually rendered, and a child of <picture>
+    // Otherwise some browsers (FF, Safari) will eagerly load it, although the image isn't the one the browser
+    // should load given the other source/srcset variants. Also prevents native lazy loading.
+    return (this.isRendered || typeof FastBoot !== 'undefined') &&
+      this.imageMeta
       ? `${this.imageMeta.image}${
           this.args.cacheBreaker ? '?' + this.args.cacheBreaker : ''
         }`
@@ -244,4 +253,9 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
   onLoad(): void {
     this.isLoaded = true;
   }
+
+  @action
+  setRendered(): void {
+    this.isRendered = true;
+  }
 }

package.json

@@ -30,6 +30,7 @@
     "postpack": "ember ts:clean"
   },
   "dependencies": {
+    "@ember/render-modifiers": "^1.0.2",
     "@embroider/macros": "^0.36.0",
     "@glimmer/component": "^1.0.3",
     "@glimmer/tracking": "^1.0.3",

yarn.lock

@@ -1122,6 +1122,14 @@
     mkdirp "^1.0.4"
     silent-error "^1.1.1"
 
+"@ember/render-modifiers@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@ember/render-modifiers/-/render-modifiers-1.0.2.tgz#2e87c48db49d922ce4850d707215caaac60d8444"
+  integrity sha512-6tEnHl5+62NTSAG2mwhGMFPhUrJQjoVqV+slsn+rlTknm2Zik+iwxBQEbwaiQOU1FUYxkS8RWcieovRNMR8inQ==
+  dependencies:
+    ember-cli-babel "^7.10.0"
+    ember-modifier-manager-polyfill "^1.1.0"
+
 "@ember/test-helpers@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@ember/test-helpers/-/test-helpers-2.2.1.tgz#584eb8359c4bf84670320a95e6af629d7526bc2a"
@@ -6518,7 +6526,7 @@ ember-maybe-import-regenerator@^0.1.6:
     ember-cli-babel "^6.0.0-beta.4"
     regenerator-runtime "^0.9.5"
 
-ember-modifier-manager-polyfill@^1.2.0:
+ember-modifier-manager-polyfill@^1.1.0, ember-modifier-manager-polyfill@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ember-modifier-manager-polyfill/-/ember-modifier-manager-polyfill-1.2.0.tgz#cf4444e11a42ac84f5c8badd85e635df57565dda"
   integrity sha512-bnaKF1LLKMkBNeDoetvIJ4vhwRPKIIumWr6dbVuW6W6p4QV8ZiO+GdF8J7mxDNlog9CeL9Z/7wam4YS86G8BYA==