[object Object]

← back to Designer Wallcoverings

fix(rimg): drop placeholder srcset + use native loading=lazy so Boost cards show real image

e0bf21379a3fd4816fc8749a4403eda9c1b99888 · 2026-09-14 15:26:19 -0700 · Steve

The lazy <img> already emits a real Shopify img_url in src; a data-SVG placeholder
srcset was winning source selection and staying stuck on Boost's infinite-scroll
appended cards when rimg didn't re-watch the new nodes (blank product images).
Remove the placeholder srcset and rely on the real src + native loading="lazy",
which preserves deferred fetch without masking the image.

NOTE: committed to git only — NOT deployed to the live Shopify theme (separate gate).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

Diff

commit e0bf21379a3fd4816fc8749a4403eda9c1b99888
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon Sep 14 15:26:19 2026 -0700

    fix(rimg): drop placeholder srcset + use native loading=lazy so Boost cards show real image
    
    The lazy <img> already emits a real Shopify img_url in src; a data-SVG placeholder
    srcset was winning source selection and staying stuck on Boost's infinite-scroll
    appended cards when rimg didn't re-watch the new nodes (blank product images).
    Remove the placeholder srcset and rely on the real src + native loading="lazy",
    which preserves deferred fetch without masking the image.
    
    NOTE: committed to git only — NOT deployed to the live Shopify theme (separate gate).
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 shopify/theme-LIVE-591/snippets/rimg.liquid | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/shopify/theme-LIVE-591/snippets/rimg.liquid b/shopify/theme-LIVE-591/snippets/rimg.liquid
index 0ae7516c..53c56b06 100644
--- a/shopify/theme-LIVE-591/snippets/rimg.liquid
+++ b/shopify/theme-LIVE-591/snippets/rimg.liquid
@@ -341,7 +341,20 @@
       data-rimg-max="{{ img.width }}x{{ img.height }}"
       data-rimg-crop="{{ crop }}"
       {% if placeholder %}data-rimg-placeholder="{{ placeholder }}"{% endif %}
-      srcset="{{ rimg_placeholder }}"
+      {%- comment -%}
+        Keep the real Shopify URL in `src` as the browser fallback. A
+        data-SVG `srcset` wins the browser's source selection and can remain
+        stuck on Boost's infinite-scroll appended cards when rimg does not
+        re-watch the new nodes. Native lazy loading preserves deferred fetches
+        without allowing the placeholder to mask the real image.
+      {%- endcomment -%}
+      loading="lazy"
+      {%- comment -%}
+        Removing the placeholder srcset dropped the pre-load aspect ratio. Restore it via
+        intrinsic width/height attrs so the browser reserves space and grids don't collapse/CLS
+        before each image decodes. (Responsive CSS with height:auto uses these only for ratio.)
+      {%- endcomment -%}
+      {% if img.width and img.height %}width="{{ img.width }}" height="{{ img.height }}"{% endif %}
     {% else %}
       data-rimg
       srcset="{{ rimg_density_srcset }}"

← 624ad3ff fix(TK-11357/TK-11403/TK-11539): create DRAFT then gate befo  ·  back to Designer Wallcoverings  ·  fix(review): 6 code-review findings — Versa color, price-gat 2fafce86 →