diff --git a/src/components/live.ts b/src/components/live.ts
index ab32b155..0b895dfe 100644
--- a/src/components/live.ts
+++ b/src/components/live.ts
@@ -139,14 +139,18 @@ export class FrigateCardLive extends LitElement {
       return;
     }
 
-    // Note use of liveConfig and not config below -- the carousel will
-    // independently override the liveconfig to reflect the camera in the
-    // carousel (not necessarily the selected camera).
+    // Notes:
+    // - See use of liveConfig and not config below -- the carousel will
+    //   independently override the liveConfig to reflect the camera in the
+    //   carousel (not necessarily the selected camera).
+    // - Fetching of thumbnails is disabled as long as live view is the
+    //   background (preloaded) rather than foreground (not preloaded).
     return html` <frigate-card-surround-thumbnails
       .hass=${this.hass}
       .view=${this.view}
       .config=${config.controls.thumbnails}
       .browseMediaParams=${browseMediaParams}
+      ?fetch=${!this._preloaded}
     >
       <frigate-card-live-carousel
         .hass=${this.hass}
diff --git a/src/components/surround-thumbnails.ts b/src/components/surround-thumbnails.ts
index f0d62a2f..9bd707f9 100644
--- a/src/components/surround-thumbnails.ts
+++ b/src/components/surround-thumbnails.ts
@@ -33,16 +33,18 @@ export class FrigateCardSurround extends LitElement {
   @property({ attribute: false })
   protected targetView?: FrigateCardView;
 
+  @property({ attribute: true, type: Boolean })
+  protected fetch?: boolean;
+
   @property({ attribute: false })
   protected browseMediaParams?:
     | BrowseMediaQueryParameters
     | BrowseMediaQueryParameters[];
 
-  // A task to await the load of the WebRTC component.
   protected _browseTask = new Task(this, this._fetchMedia.bind(this), () => [
-    this.hass,
     this.view,
     this.browseMediaParams,
+    this.fetch,
   ]);
 
   /**
@@ -51,25 +53,25 @@ export class FrigateCardSurround extends LitElement {
    * @param param Task parameters.
    * @returns
    */
-  protected async _fetchMedia([hass, view, browseMediaParams]: (
-    | HomeAssistant
+  protected async _fetchMedia([view, browseMediaParams, fetch]: (
     | Readonly<View>
     | BrowseMediaQueryParameters
     | BrowseMediaQueryParameters[]
+    | boolean
     | undefined
   )[]): Promise<void> {
-    hass = hass as HomeAssistant;
     view = view as Readonly<View>;
     browseMediaParams = browseMediaParams as
       | BrowseMediaQueryParameters
       | BrowseMediaQueryParameters[];
+    fetch = fetch as boolean;
 
-    if (!hass || !view || view.target || !browseMediaParams) {
+    if (!fetch || !this.hass || !view || view.target || !browseMediaParams) {
       return;
     }
     let parent: FrigateBrowseMediaSource | null;
     try {
-      parent = await BrowseMediaUtil.multipleBrowseMediaQueryMerged(hass, browseMediaParams);
+      parent = await BrowseMediaUtil.multipleBrowseMediaQueryMerged(this.hass, browseMediaParams);
     } catch (e) {
       return dispatchErrorMessageEvent(this, (e as Error).message);
     }
diff --git a/src/types.ts b/src/types.ts
index f754ab13..0187ce73 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -177,9 +177,9 @@ const noActionSchema = schemaForType<
 );
 
 const frigateCardCustomactionsBaseSchema = customActionSchema.extend({
-  // Syntactic sugar to avoid 'fire-dom-event' as part of an external API.
   action: z
     .literal('custom:frigate-card-action')
+    // Syntactic sugar to avoid 'fire-dom-event' as part of an external API.
     .transform((): 'fire-dom-event' => 'fire-dom-event')
     .or(z.literal('fire-dom-event')),
 });