Note that viewport and eager only apply to links that are present in the DOM immediately following navigation - if a link is added later (in an block, for example) it will not be preloaded until triggered by hover or tap. "tap" - as above, except that only code is preloaded."hover" - as above, except that only code is preloaded."viewport" means that links will be preloaded once they enter the viewport."eager" means that links will be preloaded straight away.The data-sveltekit-preload-code attribute works similarly to data-sveltekit-preload-data, except that it can take one of four values, in decreasing 'eagerness': data-sveltekit-preload-codeĮven in cases where you don't want to preload data for a link, it can be beneficial to preload the code. You can also programmatically invoke preloadData from $app/navigation.ĭata will never be preloaded if the user has chosen reduced data usage, meaning is true. In these cases, you can specify the "tap" value, which causes SvelteKit to call load only when the user taps or clicks on a link: Sometimes, calling load when the user hovers over a link might be undesirable, either because it's likely to result in false positives (a click needn't follow a hover) or because data is updating very quickly and a delay could mean staleness. The default project template has a data-sveltekit-preload-data="hover" attribute applied to the element in src/app.html, meaning that every link is preloaded on hover by default: %sveltekit.body% "tap" means that preloading will start as soon as a touchstart or mousedown event is registered.On mobile, preloading begins on touchstart "hover" means that preloading will start if the mouse comes to a rest over a link.We can control this behaviour with the data-sveltekit-preload-data attribute, which can have one of two values: SvelteKit can use this information to get a head start on importing the code and fetching the page's data, which can give us an extra couple of hundred milliseconds - the difference between a user interface that feels laggy and one that feels snappy. In both cases, we can make an educated guess that a click event is coming. data-sveltekit-preload-dataīefore the browser registers that the user has clicked on a link, we can detect that they've hovered the mouse over it (on desktop) or that a touchstart or mousedown event was triggered. These options also apply to elements with method="GET". These can be applied to the itself, or to a parent element. You can customise the behaviour of links with data-sveltekit-* attributes. If the user clicks on a link whose href is 'owned' by the app (as opposed to, say, a link to an external site) then SvelteKit will navigate to the new page by importing its code and then calling any load functions it needs to fetch data. In SvelteKit, elements (rather than framework-specific components) are used to navigate between the routes of your app.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |