Merge pull request #10 from indykoning/patch-2

Prevent render blocking resizes

Author: BobWez98

resources/views/image.blade.php

@@ -26,12 +26,18 @@ class="{{ $class }}"
             <img
                     {!! $attributes ?? '' !!}
                     class="{{ $class }}"
+                    @if($presets['placeholder'] ?? false)
+                        style="background-image: url('{{ $presets['placeholder'] }}'); background-size: contain; background-position: center; background-repeat: no-repeat;"
+                    @endif
                     src="{{ $presets['placeholder'] ?? $image->url() }}"
                     alt="{{ $alt ?? $image->alt() }}"
                     width="{{ $width }}"
                     height="{{ $height }}"
                     onload="
-                        this.onload=null;
+                        this.onload=()=>{
+                            this.style.backgroundImage = null;
+                            this.onload=null
+                        };
                         window.responsiveResizeObserver.observe(this);
                     "
             >

resources/views/partials/head.blade.php

@@ -1,14 +1,18 @@
 <script>
-    window.responsiveResizeObserver = new ResizeObserver((entries) => {
-        entries.forEach(entry => {
-            const bounds = entry.target.getBoundingClientRect();
-            const imgWidth = bounds.width;
-            const imgHeight = bounds.height;
-            const pixelRatio = window.devicePixelRatio * imgWidth;
-            
-            requestAnimationFrame(() => entry.target.parentNode.querySelectorAll('source').forEach((source) => {
-                source.sizes = pixelRatio + 'px';
-            }));
+window.responsiveResizeObserver = new ResizeObserver(async (entries) => {
+    entries.forEach(entry => {
+        let imgWidth = entry.devicePixelContentBoxSize[0].inlineSize;
+
+        if (imgWidth === 0) {
+            return;
+        }
+        
+        requestAnimationFrame(() => {
+            entry.target.loading = 'lazy';
+            entry.target.parentNode.querySelectorAll('source').forEach((source) => {
+                source.sizes = imgWidth + 'px'
+            })
         });
-    });
+    })
+});
 </script>