Lazy-load images progressively
Last updated a month ago by zerodevx .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @zerodevx/svelte-img 
SYNC missed versions from official npm registry.


A component to lazy-load images natively and progressively.

DEMO: https://zerodevx.github.io/svelte-img/

This is a super simple and lightweight component that transforms this:

<svelte-img src="/image.jpg" placeholder="/image-tiny.jpg"></svelte-img>

into this:

  <div style="background:url('/image-tiny.jpg') center center / cover no-repeat"></div>
  <img src="/image.jpg" alt="image" loading="lazy">

where the placeholder will be gaussian blurred and the main image beautifully transitioned in place when its download completes.

The work of lazy-loading is deferred to browsers to handle natively via the loading="lazy" attribute. For browsers that don't support this (yet), images will load as normal (i.e. eagerly).



To install latest stable:

$ npm i -D @zerodevx/svelte-img


This is still in pre-release so install with the @next tag:

$ npm i -D @zerodevx/svelte-img@next

Use as a Svelte component

Simply consume anywhere in your app:


  import Img from '@zerodevx/svelte-img`

  .container {
    width: 100%;
    max-width: 800px;
    height: 500px;

<div class="container">
    srcset="/images/hello-800.jpg 800w, /images/hello-480.jpg 480w"
    sizes="(max-width: 600px) 480px, 800px"

Use as native Web Component

Just load the web component definition from CDN then use anywhere.

  <!-- Load the web component definition -->
  <script type="module" src="https://cdn.jsdelivr.net/npm/@zerodevx/svelte-img@0"></script>
  <!-- Use anywhere -->
  <div class="explicitly-sized-container">
    <svelte-img src="/image.jpg"></svelte-img>

Or you can download the script and host it yourself.


Fork, clone and install dependencies:

$ git clone https://github.com/<username>/svelte-img
$ cd svelte-img
$ npm i

Start the dev server:

$ npm run dev

Create a new branch, make changes and commit:

$ git checkout -b my-contribution
$ git add -A
$ git commit -m <message>

Lint the code:

$ npm run lint

Then raise a PR.



Current Tags

  • 0.1.0-rc1                                ...           latest (a month ago)
  • 0.1.0-rc1                                ...           next (a month ago)

1 Versions

  • 0.1.0-rc1                                ...           a month ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 12
Dependencies (0)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |