Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support noscript in the image component with lazy loading support #21214

Closed
atcastle opened this issue Jan 15, 2021 · 3 comments · Fixed by #19052
Closed

Support noscript in the image component with lazy loading support #21214

atcastle opened this issue Jan 15, 2021 · 3 comments · Fixed by #19052
Labels
type: chrome
Milestone
Iteration 18

Comments

@atcastle
Copy link
Collaborator

Describe the feature you'd like to request

Currently the image component relies on javascript even when rendered on the server because of the IntersectionObserver-based lazy loading behavior. This was chosen over the native loading="lazy" to ensure maximum browser support.

However, this means that the experience with lazy-loaded images on a browser with JavaScript disabled is very bad--they just don't show up.

Describe the solution you'd like

The image component should render a noscript case which falls back to the loading="lazy" case when javascript is disabled.

Describe alternatives you've considered

There is currently a PR open #19052 which implements noscript support for the image element. Let's either merge this and then add support for loading="lazy" in the noscript case, or else modify the PR with that support and then merge.
@atcastle
Copy link
Collaborator Author

CC: @brunocrosier @styfle @Timer

@timneutkens timneutkens mentioned this issue Jan 16, 2021
Merged
@Timer Timer added this to the 10.x.x milestone Jan 19, 2021
@lachlanjc lachlanjc mentioned this issue Feb 15, 2021
Closed
@kodiakhq kodiakhq bot closed this as completed in #19052 Mar 23, 2021
kodiakhq bot pushed a commit that referenced this issue Mar 23, 2021
@brunocrosier
Add fallback for <Image /> component when JavaScript is disabled in b…
48dd995 
…rowser (#19052)

The current `<Image />` component does not fallback gracefully when JavaScript is disabled in the client / browser.

You can test this with the [official Next/Image example](https://csb-4k0kr-p8ya8f304.vercel.app/), by disabling JavaScript in the browser's DevTools. Video demo: https://streamable.com/frkvw9

This PR aims to fix this behaviour by using `<noscript></noscript>` tags to conditionally display a standard `<img>` element using the `props` passed to `<Image />` when JavaScript is disabled.

For browser sessions where JavaScript is enabled, this will not cause an increase in network requests, so there should be no downside.

One area where this PR is a bit "hacky" is that it uses a negative `margin-top` to counteract `sizerStyle.paddingTop`. From what I can tell, `sizerStyle.paddingTop` is generated on the server side, where we can not know ahead of time whether JavaScript is enabled in the browser - hence why I've opted for this solution. 

Fixes #19223
Fixes #21214
@Timer Timer modified the milestones: 10.x.x, Iteration 18 Mar 23, 2021
SokratisVidros pushed a commit to SokratisVidros/next.js that referenced this issue Apr 20, 2021
@brunocrosier @SokratisVidros
Add fallback for <Image /> component when JavaScript is disabled in b…
28e559e 
…rowser (vercel#19052)

The current `<Image />` component does not fallback gracefully when JavaScript is disabled in the client / browser.

You can test this with the [official Next/Image example](https://csb-4k0kr-p8ya8f304.vercel.app/), by disabling JavaScript in the browser's DevTools. Video demo: https://streamable.com/frkvw9

This PR aims to fix this behaviour by using `<noscript></noscript>` tags to conditionally display a standard `<img>` element using the `props` passed to `<Image />` when JavaScript is disabled.

For browser sessions where JavaScript is enabled, this will not cause an increase in network requests, so there should be no downside.

One area where this PR is a bit "hacky" is that it uses a negative `margin-top` to counteract `sizerStyle.paddingTop`. From what I can tell, `sizerStyle.paddingTop` is generated on the server side, where we can not know ahead of time whether JavaScript is enabled in the browser - hence why I've opted for this solution. 

Fixes vercel#19223
Fixes vercel#21214
flybayer pushed a commit to blitz-js/next.js that referenced this issue Apr 29, 2021
@brunocrosier
Add fallback for <Image /> component when JavaScript is disabled in b…
5d54cc4 
…rowser (vercel#19052)

The current `<Image />` component does not fallback gracefully when JavaScript is disabled in the client / browser.

You can test this with the [official Next/Image example](https://csb-4k0kr-p8ya8f304.vercel.app/), by disabling JavaScript in the browser's DevTools. Video demo: https://streamable.com/frkvw9

This PR aims to fix this behaviour by using `<noscript></noscript>` tags to conditionally display a standard `<img>` element using the `props` passed to `<Image />` when JavaScript is disabled.

For browser sessions where JavaScript is enabled, this will not cause an increase in network requests, so there should be no downside.

One area where this PR is a bit "hacky" is that it uses a negative `margin-top` to counteract `sizerStyle.paddingTop`. From what I can tell, `sizerStyle.paddingTop` is generated on the server side, where we can not know ahead of time whether JavaScript is enabled in the browser - hence why I've opted for this solution. 

Fixes vercel#19223
Fixes vercel#21214
@Kyoss79
Copy link

Kyoss79 commented May 15, 2021

Well I might be stupid, but Chrome seems to load all images that are in the noscript tag on pageload.

@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
type: chrome
Projects
None yet
Milestone
Iteration 18
Development

Successfully merging a pull request may close this issue.

Add fallback for <Image /> component when JavaScript is disabled in browser brunocrosier/next.js
5 participants
@Timer @atcastle @Kyoss79 @housseindjirdeh @balazsorban44