https://github.com/captaincodeman/svelte-disable-preload

https://github.com/captaincodeman/svelte-disable-preload

Last synced: 9 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/captaincodeman/svelte-disable-preload
• Owner: CaptainCodeman
• License: mit
• Created: 2023-01-30T19:35:07.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2024-04-29T20:13:40.000Z (over 1 year ago)
• Last Synced: 2025-03-23T22:14:24.283Z (10 months ago)
• Language: TypeScript
• Size: 69.3 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# svelte-disable-preload

![minified](https://img.shields.io/bundlephobia/min/svelte-disable-preload/0.0.2?style=for-the-badge)

![minified + zipped](https://img.shields.io/bundlephobia/minzip/svelte-disable-preload/0.0.2?style=for-the-badge)

SveltKit provides a client-side router that handles navigation when anchor elements are clicked. It can also be [configured to preload data](https://kit.svelte.dev/docs/link-options) to make your app seem "snappier". It does this by listening for various `click`, `mousedown`, `mousemove`, and `touchstart` events on the document which will bubble from elements.

For typical "web-app" use, this is no problem. But if you're working with HTML `canvas` elements and `requestAnimationFrame` animations, you may not want these extra event handlers being invoked - it can introduce a slight 'juddering' effect and spoil an otherwise smooth animation.

There is [an option to disable it](https://kit.svelte.dev/docs/link-options#disabling-options) but this only disables the _behavior_ from being invoked, i.e. the preloading itself - the event listeners are still there.

This package provides a simple action to apply noop event listeners to an element that prevent the document-level SvelteKit event handlers being invoked.

## Usage

Install using your package manager of choice, e.g.

    pnpm i svelte-no-preload

Import it into your component and `use:` it on an element:

```svelte

  import { disablePreload } from 'svelte-disable-preload'

```

Your canvas interactions should now be slightly smoother.