sveltejs / sveltejs/kit

data-sveltekit-preload-data / preloadData - preload Images too

Open
#10,864 10 comments 10 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.