bl-img
TypeScript icon, indicating that this package has built-in type declarations

0.0.6 • Public • Published

bl-img

Progressviely load an image with blur effect.

<bl-img> is a web component that loads a thumbnail image first with blur effect, then loads the HD image in the background, after HD image is loaded it appears with removal of the blur effect.

Usage

install this web component from npm

npm install bl-img --save

then insert script tag

<script src='node_modules/bl-img/dist/blimg.js'></script>

or use unpkg CDN

<script src='https://unpkg.com/bl-img@0.0.6/dist/blimg.js'></script>

after this you should be able to use it like any other html tags

    <style>
      .image {
        width: 400px;
        max-height: 400px;
      }
    </style> 
    <bl-img 
    class="image"
    thumb-src="https://cdn-images-1.medium.com/freeze/max/60/1*xU8VOotxa_HpI908SBACAQ.jpeg?q=20" src="https://cdn-images-1.medium.com/max/1600/1*xU8VOotxa_HpI908SBACAQ.jpeg"
    alt="hello world"
    ></bl-img>

Readme

Keywords

none

Package Sidebar

Install

npm i bl-img

Weekly Downloads

2

Version

0.0.6

License

MIT

Last publish

Collaborators

  • seanwuapps