data-sveltekit-preload-data / preloadData - preload Images too
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the problem
I think it is a little inconvenient that the preloadDat doesn't have a mechanism to preload Images too.
Svelte is focused on DX/convenient/rapid development and today's Website often contain a fair amount of Images. Which often contribute to the overall appearance / content of the website. So it would be nice to have them instantly available once a user navigate -> prefetch them before the user navigates.
I couldn't find a nice solution to implement this atm. I found a few thing that could be done but all fall apart at one place or the other:
1.) Programatically load the images via a Image or <link rel="preload" src="..."/> -> this is somewhat fine and working but depending how you get the images can be some extra amount of work and only works if the server has an cache-policie in place.
2.) Somehow loading the Picture in the load function of +page.server.ts (like a blob an save it to a store or whatever) - this works well but falls apart if the user clicks on links fast and on 'full reloads' because then the function takes time to complete an blocks the ui from appearing. The full reload issue can be fix if one checks the isDataRequest attribute.
3.) I had some more will add later
Describe the proposed solution
Have images fetched automatically, maybe have a special attribute on the img`element to tag them as important and only prefetch this images
Alternatives considered
No response
Importance
would make my life easier
Additional Information
I know that the problem arises because the navigation is done client side and the preload does fetch js/json. which includes the image urls but the browser won't start to fetch the until they become part of the html.
I started with svelte two weeks ago maybe I missed something
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the SvelteKit preloadData/preloadData behavior described in the issue, then compare it with image handling in +page.server.ts and the isDataRequest path. Review the proposed img-element marker and existing client-side navigation behavior; done means a documented, agreed mechanism for prefetching selected images without blocking full reloads.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 28/100