https://github.com/imcuttle/medium-image-progressive

Medium's progressive image style
https://github.com/imcuttle/medium-image-progressive

image medium medium-image progressive react

Last synced: 8 months ago
JSON representation

Medium's progressive image style

• Host: GitHub
• URL: https://github.com/imcuttle/medium-image-progressive
• Owner: imcuttle
• License: mit
• Created: 2018-03-11T11:31:32.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-01-07T14:54:02.000Z (over 4 years ago)
• Last Synced: 2025-01-07T21:11:34.332Z (over 1 year ago)
• Topics: image, medium, medium-image, progressive, react
• Language: JavaScript
• Size: 6.5 MB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: Readme.md
  • License: License

Awesome Lists containing this project

README

          
# medium-image-progressive

Medium's progressive image style.

[![build status](https://img.shields.io/travis/imcuttle/medium-image-progressive/master.svg?style=flat-square)](https://travis-ci.org/imcuttle/medium-image-progressive)

[![NPM version](https://img.shields.io/npm/v/medium-image-progressive.svg?style=flat-square)](https://www.npmjs.com/package/medium-image-progressive)

[![NPM Downloads](https://img.shields.io/npm/dm/medium-image-progressive.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/medium-image-progressive)

[Demo](https://imcuttle.github.io/medium-image-progressive/)  

![](./snapshot.gif)

## Installation

### NPM

```bash

npm i medium-image-progressive

```

### UMD

name: mediumImageProgressive  

[unpkg](https://unpkg.com/medium-image-progressive)

## Usage

```javascript

import mediumImageProgressive from 'medium-image-progressive'

mediumImageProgressive('img selector', {

  // options

})

```

### Options

- `progressImageUrlGetter`   

  the thumb image url getter  

  default: `(elem) => elem.getAttribute('src')`

- `originImageUrlGetter`   

  default: `(elem) => elem.getAttribute('data-src')`

- `widthGetter`      

  image's width getter  

  default `elem => elem.getAttribute('width')`

- `heightGetter`    

  default: `elem => elem.getAttribute('height')`

### React Component

```javascript

import MPImg from 'medium-image-progressive/dist/react'

// render

```