From 556758085998203b0eddbb9dfdbe2a40d021320a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lars=20Heidk=C3=A4mper?= <heidkaemper@new-data-services.de>
Date: Fri, 6 Mar 2026 17:25:40 +0100
Subject: [PATCH] support for live preview hot reload

---
 resources/views/responsiveImage.blade.php     | 40 ++++++++++++++-----
 tests/Feature/ResponsiveTagTest.php           | 10 +++++
 ...ormat_quality_is_set_on_breakpoints__1.txt | 19 +++++----
 ..._parameters_to_the_attribute_string__1.txt | 19 +++++----
 ..._it_can_add_custom_glide_parameters__1.txt | 19 +++++----
 ...responsive_image_with_the_directive__1.txt | 19 +++++----
 ...d_image_as_array_with_the_directive__1.txt | 19 +++++----
 ...t_directed_image_with_the_directive__1.txt | 19 +++++----
 ...t_generates_no_conversions_for_gifs__1.txt | 19 +++++----
 ...t_generates_no_conversions_for_svgs__1.txt | 19 +++++----
 ...est__it_generates_responsive_images__1.txt | 19 +++++----
 ...ive_images_in_webp_and_avif_formats__1.txt | 19 +++++----
 ...ive_images_in_webp_and_avif_formats__2.txt | 19 +++++----
 ...e_images_with_breakpoint_parameters__1.txt | 19 +++++----
 ...mages_with_breakpoints_without_webp__1.txt | 19 +++++----
 ...s_responsive_images_with_parameters__1.txt | 19 +++++----
 ...onsive_images_without_a_placeholder__1.txt | 19 +++++----
 ...ates_responsive_images_without_webp__1.txt | 19 +++++----
 ...__it_uses_an_alt_field_on_the_asset__1.txt | 19 +++++----
 ...e_image_can_change_with_breakpoints__1.txt | 19 +++++----
 20 files changed, 201 insertions(+), 191 deletions(-)

diff --git a/resources/views/responsiveImage.blade.php b/resources/views/responsiveImage.blade.php
index b84eab0..bfe6b63 100644
--- a/resources/views/responsiveImage.blade.php
+++ b/resources/views/responsiveImage.blade.php
@@ -1,25 +1,43 @@
 @once
     <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
+
+            @if(request()->isLivePreview())
+                new MutationObserver(mutations => {
+                    for (const { addedNodes } of mutations) {
+                        for (const node of addedNodes) {
+                            if (node.nodeType !== Node.ELEMENT_NODE) {
+                                continue;
+                            }
+
+                            if (node.hasAttribute('data-statamic-responsive-images')) {
+                                window.responsiveResizeObserver.observe(node);
+                            }
+
+                            node.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                                window.responsiveResizeObserver.observe(img);
+                            });
+                        }
+                    }
+                }).observe(document.body, { childList: true, subtree: true });
+            @endif
         });
     </script>
 @endonce
 
 <picture>
-    @foreach (($breakpoints ?? []) as $breakpoint)
+    @foreach(($breakpoints ?? []) as $breakpoint)
         @foreach($breakpoint->sources() ?? [] as $source)
             @php
                 $srcSet = $source->getSrcset();
@@ -39,7 +57,7 @@
     <img
         {!! $attributeString ?? '' !!}
         src="{{ $src }}"
-        @unless (\Illuminate\Support\Str::contains($attributeString, 'alt'))
+        @unless(\Illuminate\Support\Str::contains($attributeString, 'alt'))
         alt="{{ (string) $asset['alt'] ?: (string) $asset['title'] }}"
         @endunless
         @isset($width) width="{{ $width }}" @endisset
diff --git a/tests/Feature/ResponsiveTagTest.php b/tests/Feature/ResponsiveTagTest.php
index 187efa7..70a0888 100644
--- a/tests/Feature/ResponsiveTagTest.php
+++ b/tests/Feature/ResponsiveTagTest.php
@@ -327,6 +327,16 @@ function assertMatchesSnapshotWithoutSvg($value)
     ]));
 });
 
+it('includes MutationObserver script for live preview', function () {
+    Request::macro('isLivePreview', fn () => true);
+
+    expect(ResponsiveTag::render($this->asset))->toContain('MutationObserver');
+});
+
+it('does not include MutationObserver script outside of live preview', function () {
+    expect(ResponsiveTag::render($this->asset))->not->toContain('MutationObserver');
+});
+
 it('does not output <source> when no dimensions are returned from dimension calculator', function () {
     $this->mock(DimensionCalculator::class, function ($mock) {
         $mock->shouldReceive('calculateForBreakpoint')->andReturn(collect([]));
diff --git a/tests/__snapshots__/ResponsiveTagTest__format_quality_is_set_on_breakpoints__1.txt b/tests/__snapshots__/ResponsiveTagTest__format_quality_is_set_on_breakpoints__1.txt
index 77cc9dc..bc5b947 100644
--- a/tests/__snapshots__/ResponsiveTagTest__format_quality_is_set_on_breakpoints__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__format_quality_is_set_on_breakpoints__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_adds_custom_parameters_to_the_attribute_string__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_adds_custom_parameters_to_the_attribute_string__1.txt
index a0c822e..96964ca 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_adds_custom_parameters_to_the_attribute_string__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_adds_custom_parameters_to_the_attribute_string__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_can_add_custom_glide_parameters__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_can_add_custom_glide_parameters__1.txt
index 904327f..ea49bc6 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_can_add_custom_glide_parameters__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_can_add_custom_glide_parameters__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_can_render_a_responsive_image_with_the_directive__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_can_render_a_responsive_image_with_the_directive__1.txt
index 7de3499..fab2f24 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_can_render_a_responsive_image_with_the_directive__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_can_render_a_responsive_image_with_the_directive__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_can_render_an_art_directed_image_as_array_with_the_directive__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_can_render_an_art_directed_image_as_array_with_the_directive__1.txt
index 7de3499..fab2f24 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_can_render_an_art_directed_image_as_array_with_the_directive__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_can_render_an_art_directed_image_as_array_with_the_directive__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_can_render_an_art_directed_image_with_the_directive__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_can_render_an_art_directed_image_with_the_directive__1.txt
index 7de3499..fab2f24 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_can_render_an_art_directed_image_with_the_directive__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_can_render_an_art_directed_image_with_the_directive__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_generates_no_conversions_for_gifs__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_generates_no_conversions_for_gifs__1.txt
index 670ff88..07c59d8 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_generates_no_conversions_for_gifs__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_generates_no_conversions_for_gifs__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_generates_no_conversions_for_svgs__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_generates_no_conversions_for_svgs__1.txt
index 71dc497..4dce196 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_generates_no_conversions_for_svgs__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_generates_no_conversions_for_svgs__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images__1.txt
index 7de3499..fab2f24 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_in_webp_and_avif_formats__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_in_webp_and_avif_formats__1.txt
index dcaf5ab..cdf5d02 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_in_webp_and_avif_formats__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_in_webp_and_avif_formats__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_in_webp_and_avif_formats__2.txt b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_in_webp_and_avif_formats__2.txt
index dcaf5ab..cdf5d02 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_in_webp_and_avif_formats__2.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_in_webp_and_avif_formats__2.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_with_breakpoint_parameters__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_with_breakpoint_parameters__1.txt
index 8177a3a..9ee9cf9 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_with_breakpoint_parameters__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_with_breakpoint_parameters__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_with_breakpoints_without_webp__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_with_breakpoints_without_webp__1.txt
index 838d32e..535a0f1 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_with_breakpoints_without_webp__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_with_breakpoints_without_webp__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_with_parameters__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_with_parameters__1.txt
index 610d63d..57e7fec 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_with_parameters__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_with_parameters__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_without_a_placeholder__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_without_a_placeholder__1.txt
index 77b072e..c736257 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_without_a_placeholder__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_without_a_placeholder__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_without_webp__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_without_webp__1.txt
index 06e645c..88600ef 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_without_webp__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_generates_responsive_images_without_webp__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__it_uses_an_alt_field_on_the_asset__1.txt b/tests/__snapshots__/ResponsiveTagTest__it_uses_an_alt_field_on_the_asset__1.txt
index 3033113..a291062 100644
--- a/tests/__snapshots__/ResponsiveTagTest__it_uses_an_alt_field_on_the_asset__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__it_uses_an_alt_field_on_the_asset__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>
diff --git a/tests/__snapshots__/ResponsiveTagTest__the_source_image_can_change_with_breakpoints__1.txt b/tests/__snapshots__/ResponsiveTagTest__the_source_image_can_change_with_breakpoints__1.txt
index d88c646..a9246b0 100644
--- a/tests/__snapshots__/ResponsiveTagTest__the_source_image_can_change_with_breakpoints__1.txt
+++ b/tests/__snapshots__/ResponsiveTagTest__the_source_image_can_change_with_breakpoints__1.txt
@@ -1,19 +1,18 @@
 <script>
-        window.addEventListener('load', function () {
+        document.addEventListener('DOMContentLoaded', function () {
             window.responsiveResizeObserver = new ResizeObserver((entries) => {
-                entries.forEach(entry => {
-                    const imgWidth = entry.target.getBoundingClientRect().width;
-                    entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                        source.sizes = Math.ceil(imgWidth / window.innerWidth * 100) + 'vw';
-                    });
+                entries.forEach(({ target, contentRect }) => {
+                    const vw = Math.ceil(contentRect.width / window.innerWidth * 100) + 'vw';
+
+                    target.parentNode.querySelectorAll('source').forEach(source => source.sizes = vw);
                 });
             });
 
-            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
-                responsiveResizeObserver.onload = null;
-                responsiveResizeObserver.observe(responsiveImage);
+            document.querySelectorAll('[data-statamic-responsive-images]').forEach(img => {
+                window.responsiveResizeObserver.observe(img);
             });
-        });
+
+                    });
     </script>
 
 <picture>