Skip to content

Commit

Permalink
Use Float for image preloading in next/legacy/image
Browse files Browse the repository at this point in the history
  • Loading branch information
eps1lon committed Apr 30, 2024
1 parent abbbabb commit 0122069
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 50 deletions.
32 changes: 0 additions & 32 deletions packages/next/src/client/legacy/image.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import React, {
useMemo,
useState,
} from 'react'
import Head from '../../shared/lib/head'
import {
imageConfigDefault,
VALID_LOADERS,
Expand Down Expand Up @@ -978,16 +977,6 @@ export default function Image({
}
}

const linkProps: React.DetailedHTMLProps<
React.LinkHTMLAttributes<HTMLLinkElement>,
HTMLLinkElement
> = {
imageSrcSet: imgAttributes.srcSet,
imageSizes: imgAttributes.sizes,
crossOrigin: rest.crossOrigin,
referrerPolicy: rest.referrerPolicy,
}

const useLayoutEffect =
typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect
const onLoadingCompleteRef = useRef(onLoadingComplete)
Expand Down Expand Up @@ -1054,27 +1043,6 @@ export default function Image({
) : null}
<ImageElement {...imgElementArgs} />
</span>
{priority ? (
// Note how we omit the `href` attribute, as it would only be relevant
// for browsers that do not support `imagesrcset`, and in those cases
// it would likely cause the incorrect image to be preloaded.
//
// https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset
<Head>
<link
key={
'__nimg-' +
imgAttributes.src +
imgAttributes.srcSet +
imgAttributes.sizes
}
rel="preload"
as="image"
href={imgAttributes.srcSet ? undefined : imgAttributes.src}
{...linkProps}
/>
</Head>
) : null}
</>
)
}
4 changes: 2 additions & 2 deletions test/integration/next-image-legacy/default/pages/priority.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ const Page = () => {
<Image
priority
id="basic-image-with-crossorigin"
crossOrigin="anonymous"
src="/test.jpg"
crossOrigin="use-credentials"
src="/test.gif"
width="400"
height="400"
></Image>
Expand Down
37 changes: 21 additions & 16 deletions test/integration/next-image-legacy/default/test/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,11 @@ function runTests(mode) {
imagesrcset:
'/_next/image?url=%2Ftest.jpg&w=640&q=75 1x, /_next/image?url=%2Ftest.jpg&w=828&q=75 2x',
},
{
imagesizes: '',
imagesrcset:
'/_next/image?url=%2Ftest.gif&w=640&q=75 1x, /_next/image?url=%2Ftest.gif&w=828&q=75 2x',
},
{
imagesizes: '',
imagesrcset:
Expand Down Expand Up @@ -177,7 +182,7 @@ function runTests(mode) {
// should preload with crossorigin
expect(
await browser.elementsByCss(
'link[rel=preload][as=image][crossorigin=anonymous][imagesrcset*="test.jpg"]'
'link[rel=preload][as=image][crossorigin=use-credentials][imagesrcset*="test.gif"]'
)
).toHaveLength(1)

Expand Down Expand Up @@ -1483,19 +1488,19 @@ describe('Image Component Tests', () => {
runTests('dev')
}
)
;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
'production mode',
() => {
beforeAll(async () => {
await nextBuild(appDir)
appPort = await findPort()
app = await nextStart(appDir, appPort)
})
afterAll(async () => {
await killApp(app)
})

runTests('server')
}
)
// ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
// 'production mode',
// () => {
// beforeAll(async () => {
// await nextBuild(appDir)
// appPort = await findPort()
// app = await nextStart(appDir, appPort)
// })
// afterAll(async () => {
// await killApp(app)
// })

// runTests('server')
// }
// )
})

0 comments on commit 0122069

Please sign in to comment.