https://github.com/dimfeld/svelte-lazyload

Use an IntersectionObserver to delay loading elements until they are about to enter the viewport.
https://github.com/dimfeld/svelte-lazyload

lazy lazy-loading svelte

Last synced: 12 days ago
JSON representation

Use an IntersectionObserver to delay loading elements until they are about to enter the viewport.

• Host: GitHub
• URL: https://github.com/dimfeld/svelte-lazyload
• Owner: dimfeld
• License: mit
• Created: 2020-07-02T07:41:56.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-08-03T06:18:31.000Z (over 1 year ago)
• Last Synced: 2024-10-07T07:06:39.678Z (about 1 month ago)
• Topics: lazy, lazy-loading, svelte
• Language: Svelte
• Homepage:
• Size: 60.5 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-lazyload

This is a small component that uses an `IntersectionObserver` to delay loading some element of a page until it is about to enter the viewport. It exposes a property `visible` indicating if the element has been created, and also fires an event named `visible` when it loads the element.

```svelte

  import { fade } from 'svelte/transition';

  import LazyLoad from '@dimfeld/svelte-lazyload';

  let visible = false;



  Visible: {visible}







 console.log('visible!')}>

  
Hello!


```

Try it in the [Svelte REPL](https://svelte.dev/repl/9a2f40ce30b34337be76df5e9be168e8)!.