Git Product home page Git Product logo

svelte-lazy-image's Introduction

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 }}
/>

svelte-lazy-image's People

Contributors

alexstaroselsky avatar baseplate-admin avatar nimmolo avatar razrabotal avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

razrabotal asvsfs ibrunodev madeleineostoja egleged nimmolo

svelte-lazy-image's Issues

This project does not have a licence [?]

Hi dear maintainer,

it seems this project does not have an explicit licence. By default, this means that nobody would be allowed to use the project as it is your copyright. Would you mind adding one to make this explicit?

Best regards,

Add typescript defs

Would be great to have typescript definitions, now that Svelte has first class support for typescript

Typescript Issue.

Hi there,

Thanks for this awesome package that you created.

Now when I use this package like this :

<script lang='ts'>
  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 }}
/>

I get this error :

Type '{ threshold: number; }' is missing the following properties from type '{ root: any; rootMargin: string; threshold: number; }': root, rootMargin

So i think the correct types should be,

export default class LazyImage extends SvelteComponentTyped<{
    [x: string]: any;
    placeholder: string;
    src: string;
    alt: string;
    options?: {
        root?: any;
        rootMargin?: string;
        threshold?: number;
    };
}, {
    [evt: string]: CustomEvent<any>;
}, {}> {
}

Where the types in current version is :

export default class LazyImage extends SvelteComponentTyped<{
    [x: string]: any;
    placeholder: string;
    src: string;
    alt: string;
    options?: {
        root: any;
        rootMargin: string;
        threshold: number;
    };
}, {
    [evt: string]: CustomEvent<any>;
}, {}> {
}

So I created my Repo fixing this Issue. Should I submit a Pull Request ?

Forward image attributes to `img`

It would be great if svelte-lazy-image either forwarded all props given to to the underlying <img> element (ie: <img {...$$props} />, or had props for all standard img attributes. Currently it's not possible to (for example) use responsive images with sizes and srcset.

Missing props:

  • srcset
  • sizes
  • width
  • height
  • loading
  • class

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.