https://github.com/matyunya/svelte-waypoint

Lazyload images or anything component for Svelte
https://github.com/matyunya/svelte-waypoint

Last synced: 3 months ago
JSON representation

Lazyload images or anything component for Svelte

• Host: GitHub
• URL: https://github.com/matyunya/svelte-waypoint
• Owner: matyunya
• License: mit
• Created: 2019-07-01T15:32:06.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T03:22:10.000Z (almost 2 years ago)
• Last Synced: 2024-07-05T16:31:01.384Z (4 months ago)
• Language: Svelte
• Size: 1.1 MB
• Stars: 83
• Watchers: 2
• Forks: 9
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-waypoint

Lazyload images or anything in Svelte and Sapper.

### Install

```

yarn add svelte-waypoint

```

or

```

npm install svelte-waypoint --save

```

### Lazyload your stuff!

```

  import Waypoint from 'svelte-waypoint';

/*

  This will check if element is visible every 500ms and will fire

  200 pixels above the element's top border. 

*/

  

```

### Options

- `throttle` *(default: 250)* Interval in milliseconds at which listener function is fired.

- `offset` Distance from the top of the element in pixels at which the element will be marked visible.

- `class` (or `c`, deprecated) Classes passed down to waypoint's wrapper (should be unnecessary once components may receive classes)

- `style` Same as above but for style prop.

- `once` *(default: true)* If false, component will disappear every time it leaves the viewport.

- `threshold` *(default: 0)* "A threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked."

- `disabled` *(default: false)* Disable lazyloading.

Currently works only in IE11+.

### Events

- `on:enter` Callback when component enters the viewport.

- `on:leave` Callback when component leaves the viewport.