{"id":13695017,"url":"https://github.com/thinker3197/progressively","last_synced_at":"2025-10-22T16:10:42.267Z","repository":{"id":57331058,"uuid":"68229266","full_name":"thinker3197/progressively","owner":"thinker3197","description":"A JavaScript library to load images progressively 🌇","archived":false,"fork":false,"pushed_at":"2018-12-01T15:31:21.000Z","size":6183,"stargazers_count":693,"open_issues_count":14,"forks_count":67,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-04-11T17:28:58.697Z","etag":null,"topics":["image","javascript-library","lazyload","progressive-rendering","ui","ux"],"latest_commit_sha":null,"homepage":"https://thinker3197.github.io/progressively","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thinker3197.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-14T17:46:28.000Z","updated_at":"2025-03-30T01:05:46.000Z","dependencies_parsed_at":"2022-08-30T20:00:56.185Z","dependency_job_id":null,"html_url":"https://github.com/thinker3197/progressively","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thinker3197%2Fprogressively","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thinker3197%2Fprogressively/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thinker3197%2Fprogressively/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thinker3197%2Fprogressively/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thinker3197","download_url":"https://codeload.github.com/thinker3197/progressively/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252144564,"owners_count":21701434,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image","javascript-library","lazyload","progressive-rendering","ui","ux"],"created_at":"2024-08-02T17:01:56.880Z","updated_at":"2025-10-22T16:10:37.231Z","avatar_url":"https://github.com/thinker3197.png","language":"JavaScript","readme":"# Progressively\n\n[![Travis](https://img.shields.io/travis/thinker3197/progressively.svg)](https://travis-ci.org/thinker3197/progressively)\n[![Coveralls](https://img.shields.io/coveralls/thinker3197/progressively.svg)](https://coveralls.io/github/thinker3197/progressively?branch=master)\n[![npm (scoped)](https://img.shields.io/npm/v/progressively.svg)](https://www.npmjs.com/package/progressively)\n[![David](https://img.shields.io/david/thinker3197/progressively.svg)](https://david-dm.org/thinker3197/progressively)\n[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)\n\n\u003e A JavaScript library to load images progressively\n\nIt’s written entirely in JavaScript so it doesn’t depend on 3rd-party libraries like jQuery. It's super small, \u003c 1.2kB when minified \u0026 gzipped! It will load the full-size images only when the user browses to that part of the page, saving bandwidth \u0026 server requests. It is compatible with all modern browsers. See the [Demo](https://thinker3197.github.io/progressively).\n\n![demo-image](https://raw.githubusercontent.com/thinker3197/progressively/master/demo.gif)\n\n## Table of Contents\n\n- [Install](#install)\n- [Usage](#usage)\n- [API](#api)\n- [Contribute](#contribute)\n- [License](#license)\n\n## Install\n\nThis project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Go check them out if you don't have them locally installed.\n\n```sh\n$ npm install --save progressively\n```\n\nAlternatively you can use [Bower](https://bower.io/).\n\n```sh\n$ bower install progressively\n```\n\nWith a module bundler like [rollup](http://rollupjs.org/) or [webpack](https://webpack.js.org/), use as you would anything else:\n\n```javascript\n// using ES6 modules\nimport progressively from 'progressively'\n\n// using CommonJS modules\nvar progressively = require('progressively')\n```\n\nThe [UMD](https://github.com/umdjs/umd) build is also available on CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/progressively/dist/progressively.min.js\"\u003e\u003c/script\u003e\n\u003c!-- or --\u003e\n\u003cscript src=\"https://unpkg.com/progressively/dist/progressively.min.js\"\u003e\u003c/script\u003e\n```\nOnce loaded, you can access the library on `window.progressively`.\n\nYou also need to embed the css file at your page\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/progressively/dist/progressively.min.css\"\u003e\n\u003c!-- or --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/progressively/dist/progressively.min.css\"\u003e\n```\n\n## Usage\n\nAdd a image to your `HTML` file setting the `src` attribute containing the lower quality image (\u003c 20kb for ideal cases) and the `data-progressive` attribute holding the path/url to the high quality image.\n\nYou can use [lowly](https://github.com/thiamsantos/lowly) to create the images in low quality. Just run `npm i -g lowly` and then `lowly image.jpg`, after that a new image `image-lowly.jpg` will be created in the same directory of source image.\n\n```html\n\u003cfigure class=\"progressive\"\u003e\n  \u003cimg class=\"progressive__img progressive--not-loaded\" data-progressive=\"img/highQualityImg.png\" src=\"img/lowQualityImg.png\"\u003e\n\u003c/figure\u003e\n```\n\nAnd initiate the script.\n\n```js\nprogressively.init()\n```\n\nSee [demo](https://thinker3197.github.io/progressively) for examples.\n\n### Use medium quality images for mobile devices\n\nYou can add a medium resolution image via `data-progressive-sm` to reduce the filesize on mobile devices with small screens. The default breakpoint for loading `progressive-sm` image is `600` (in device independent pixels). Progressively will load the `data-progressive-sm` image when the user's device width is less than `smBreakpoint` value.\n\n```html\n\u003cfigure class=\"progressive\"\u003e\n  \u003cimg class=\"progressive__img progressive--not-loaded\" data-progressive=\"img/highQualityImg.png\" data-progressive-sm=\"img/mediumQualityImg.png\" src=\"img/lowQualityImg.png\"\u003e\n\u003c/figure\u003e\n```\n\n### Use as bg-image\n\nYou can also use progressively for background-images. Simply use `progressive__bg` instead of `progressive__img`:\n\n```html\n\u003cdiv class=\"progressive__bg progressive--not-loaded\" data-progressive=\"img/highQualityImg.png\" data-progressive-sm=\"img/mediumQualityImg.png\" style=\"background-image: url('img/lowQualityImg.png');\"\u003e\u003c/div\u003e\n```\n\n## API\n\n### progressively.init(options)\n\nThe `init()` API has a few options\n\n#### throttle\nType: `Number` Default: `300`\n\nThe `throttle` is managed by an internal function that prevents performance issues from continuous firing of `window.onscroll` events. Using a throttle will set a small timeout when the user scrolls and will keep throttling until the user stops. The default is 300 milliseconds.\n\n#### delay\nType: `Number` Default: `100` value\n\nThe `delay` function sets the timout value for images to start load asynchronously. Ideally it's value should be low.\n\n#### smBreakpoint\nType: `Number` Default: `600` value\n\nThe `loadImage` function uses this value, to load images in a medium quality (if defined and if the user's viewport is smaller than smBreakpoint).\n\n#### onLoadComplete\nType: `Function` Arguments: `None`\n\nThe `onLoadComplete` function is callback function which executes when all images have loaded. It is fired when all the image elements have the `*--is-loaded` class.\n\n#### onLoad\nType: `Function` Arguments: `HTMLElement`\n\nThe `onLoad` function is invoked whenever an image elements finishes loading. It accepts `HTMLElement` as an argument which is the current element that is loaded.\n\n```js\nprogressively.init({\n  delay: 50,\n  throttle: 300,\n  smBreakpoint: 600,\n  onLoad: function(elem) {\n    console.log(elem);\n  },\n  onLoadComplete: function() {\n    console.log('All images have finished loading!');\n  }\n});\n```\n\n### progressively.render()\n\nProgressively has a `render()` method that can be used to make progressively poll your images when you're not scrolling. For instance in some case you want to render your images before/widthout scrolling down to the image, you can use `render`.\n\n## Contribute\nSee the [contributing file](CONTRIBUTING.md) for instructions.\n\n## License\n[MIT license](LICENSE) \u0026copy; [Ashish](https://thinker3197.github.io/)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthinker3197%2Fprogressively","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthinker3197%2Fprogressively","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthinker3197%2Fprogressively/lists"}