https://github.com/arnoldfederis/progressive-image-lazyload.js

Progressive image with Lazyload
https://github.com/arnoldfederis/progressive-image-lazyload.js

javascript lazyload lazyload-images optimization progressive-image-loading

Last synced: 2 months ago
JSON representation

Progressive image with Lazyload

• Host: GitHub
• URL: https://github.com/arnoldfederis/progressive-image-lazyload.js
• Owner: arnoldfederis
• Created: 2019-06-13T10:44:54.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-08T08:51:32.000Z (over 3 years ago)
• Last Synced: 2025-08-17T00:14:34.758Z (11 months ago)
• Topics: javascript, lazyload, lazyload-images, optimization, progressive-image-loading
• Language: HTML
• Homepage: http://www.progressive-image.arnoldfederis.com
• Size: 2.71 MB
• Stars: 0
• Watchers: 0
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: readme.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

          

## Progressive Image JS

![Progressive Image JS](https://i.imgur.com/o4aKBEH.png)

[Demo](https://arnoldfederis.github.io/progressive-image-lazyload.js)

### Progressive image with Lazyload

### Install in `npm` or `yarn`

```

$ npm install progressive-image-lazyload.js

$ yarn add progressive-image-lazyload.js

```

### How to use

* `HTML` markup

```html

    


        


        


            

            

            

        

    


```

* In `HTML` put this line of code inside your `` tag

```html

```

* In `JavaScript` and `SCSS` using npm or yarn

```scss

/* SCSS */

@import "~progressive-image-lazyload.js/src/scss/progressive-image";

```

```javascript

/* JavaScript */

import 'progressive-image-lazyload.js'

```

* `data-thumb` this is where you set your small image.

* `data-src` this is where you set your large image.