Responsive resize observer script appears multiple times

[schwartzmj]

The script below loads multiple times on our pages. I assume it is only meant to load one time? I believe the issue may be because there's different partials with different {{ responsive }} tags.

Does this hurt client-side performance / script evaluation time? Is this a bug that should be fixed?

<script>
        window.addEventListener('load', 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';
                    });
                });
            });

            document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
                responsiveResizeObserver.onload = null;
                responsiveResizeObserver.observe(responsiveImage);
            });
        });
    </script>

[ncla]

Ideally yes I think it would be better if the script is run only once. Not sure if this impacts performance much.

For now as a workaround you could publish the views to your project and remove this script section from responsiveImage.blade.php and add it once else where.

[schwartzmj]

That was my thought as well. Just wanted to check in for a second opinion. Thanks!

[ncla]

On the second thought, this might be a bug. The .blade.php template specifies that it should be only output once per rendering cycle with the @once tags. Now just need to investigate whether or not this ever worked, and if this is CMS bug or this addons.

statamic-responsive-images/resources/views/responsiveImage.blade.php

Lines 1 to 19 in 6aa7591

	@once
	<script>
	window.addEventListener('load', 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';
	});
	});
	});
	document.querySelectorAll('[data-statamic-responsive-images]').forEach(responsiveImage => {
	responsiveResizeObserver.onload = null;
	responsiveResizeObserver.observe(responsiveImage);
	});
	});
	</script>
	@endonce

[schwartzmj]

My initial thought is that it may be a bug with Statamic. I haven't done much of any testing, but it seems to output "once" per partial, or something similar to that instead of "once" globally. In other words, I know I've looked at a few partials that loop images and it only outputs once, but it'll output it again in a partial down the road.

I'd have to find some time to do some actual testing.

[ncla]

I tried replicating this issue locally but I was not able to. For me the script tag is output only once as intended. If you can provide reproduceable repository/bug report then that would be great and maybe I can take a look at it then. Also take note of which Antlers runtime you are using.