New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@zerodevx/svelte-img

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zerodevx/svelte-img

Lazy-load images progressively

0.1.0-rc1
Source
npm

Version published: 4 years ago

Weekly downloads: 972; decreased by-6.45%

Maintainers: 1

Weekly downloads

Created: 4 years ago

Source

svelte-img

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

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).

Usage

Install

To install latest stable:

$ npm i -D @zerodevx/svelte-img

NOTE

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:

MyComponent.svelte

<script>
  import Img from '@zerodevx/svelte-img`
</script>

<style>
  .container {
    width: 100%;
    max-width: 800px;
    height: 500px;
  }
</style>

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

Use as native Web Component

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

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

Or you can download the script and host it yourself.

Contributing

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.

License

ISC

Keywords

FAQs

What is @zerodevx/svelte-img?

Is @zerodevx/svelte-img popular?

Is @zerodevx/svelte-img well maintained?

Package last updated on 28 Sep 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install