svelte-lazy-image
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.1 • Public • Published

    svelte-lazy-image

    Svelte component to lazy load images using Intersection Observer.

    Usage

    npm install svelte-lazy-image

    Svelte:

    use:action

    Set data-src and/or data-srcset on an img element:

    <script>
    	import { useLazyImage as lazyImage } from 'svelte-lazy-image';
    </script>
    
    <img data-src="https://via.placeholder.com/250?text=src1" alt="foobar" use:lazyImage />

    Specify IntersectionObserver options via object passed to use:

    <script>
    	import { LazyImage, useLazyImage as lazyImage } from 'svelte-lazy-image';
    </script>
    
    <img src="https://via.placeholder.com/250?text=placeholder1"
    data-src="https://via.placeholder.com/250?text=src1" alt="foobar" use:lazyImage={{ threshold: 0.5 }}
    />

    Component

    <script>
    	import { LazyImage } from 'svelte-lazy-image';
    </script>
    
    <LazyImage
    	src="https://via.placeholder.com/250?text=src"
    	placeholder="https://via.placeholder.com/250?text=placeholder"
    	alt="Lorem Ipsum"
    />

    The component uses $$restProps to pass props other than placeholder, src, or alt to the underlying img element. An example using img attributes srcset and sizes:

    <script>
    	import { LazyImage } from 'svelte-lazy-image';
    </script>
    
    <LazyImage
    	src="https://via.placeholder.com/250?text=src"
    	placeholder="https://via.placeholder.com/250?text=placeholder"
    	alt="Lorem Ipsum"
    	srcset="https://via.placeholder.com/480 480w, https://via.placeholder.com/800 800w"
    	sizes="(max-width: 600px) 480px, 800px"
    />

    Specify IntersectionObserver options:

    <script>
      import { LazyImage } from 'svelte-lazy-image';
    </script>
    
    <LazyImage
      src="https://via.placeholder.com/250?text=src"
      placeholder="https://via.placeholder.com/250?text=placeholder"
      alt="Lorem Ipsum"
      options={{ threshold: 0.5 }}
    />

    Install

    npm i svelte-lazy-image

    DownloadsWeekly Downloads

    585

    Version

    0.5.1

    License

    MIT

    Unpacked Size

    7.87 kB

    Total Files

    9

    Last publish

    Collaborators

    • alstar01