Skip to content

Commit b22c67b

Browse files
fix(core): respect sizes when preloading images (#28)
* refactor: give imageLoader variable a more descriptive name * fix(feat): load correct image when using loadImage function * refactor: re-use width calculation logic --------- Co-authored-by: Johann Schopplich <mail@johannschopplich.com>
1 parent bb35a52 commit b22c67b

File tree

1 file changed

+16
-9
lines changed

1 file changed

+16
-9
lines changed

packages/core/src/lazyLoad.ts

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -105,16 +105,19 @@ export function loadImage(
105105
image: HTMLImageElement,
106106
onImageLoad?: (image: HTMLImageElement) => void,
107107
) {
108-
const imageLoader = new Image()
108+
const imagePreLoader = new Image()
109109
const { srcset, src, sizes } = image.dataset
110+
if (sizes) {
111+
// Calculate the correct `sizes` attribute if `data-sizes="auto"` is set
112+
const width = getOffsetWidth(image)
113+
imagePreLoader.sizes = (sizes === 'auto' && width) ? `${width}px` : sizes
114+
}
110115
if (srcset)
111-
imageLoader.srcset = srcset
116+
imagePreLoader.srcset = srcset
112117
if (src)
113-
imageLoader.src = src
114-
if (sizes)
115-
imageLoader.sizes = sizes
118+
imagePreLoader.src = src
116119

117-
imageLoader.addEventListener('load', () => {
120+
imagePreLoader.addEventListener('load', () => {
118121
updatePictureSources(image)
119122
updateImageSrcset(image)
120123
updateImageSrc(image)
@@ -186,9 +189,7 @@ export function updateSizesAttribute(element: HTMLImageElement | HTMLSourceEleme
186189
if (sizes !== 'auto')
187190
return removeResizeObserver
188191

189-
const width = element instanceof HTMLSourceElement
190-
? element.parentElement?.getElementsByTagName('img')[0]?.offsetWidth
191-
: element.offsetWidth
192+
const width = getOffsetWidth(element)
192193

193194
if (width)
194195
element.sizes = `${width}px`
@@ -225,3 +226,9 @@ function updatePictureSources(image: HTMLImageElement) {
225226
[...picture.querySelectorAll<HTMLSourceElement>('source[data-src]')].forEach(updateImageSrc)
226227
}
227228
}
229+
230+
function getOffsetWidth(element: HTMLElement | HTMLSourceElement) {
231+
return element instanceof HTMLSourceElement
232+
? element.parentElement?.getElementsByTagName('img')[0]?.offsetWidth
233+
: element.offsetWidth
234+
}

0 commit comments

Comments
 (0)