{"_id":"progressively","_rev":"9-ce1f18fc50bbba6dc8525f927e2eeaec","name":"progressively","description":"A JavaScript library to load images progressively","dist-tags":{"latest":"1.2.5"},"versions":{"1.0.0":{"name":"progressively","version":"1.0.0","description":"A JavaScript library to load images progressively","main":"./dist/progressively.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/thinker3197/progressively.git"},"keywords":["progressive","lazy-load","images"],"author":{"name":"Ashish"},"license":"MIT","bugs":{"url":"https://github.com/thinker3197/progressively/issues"},"homepage":"https://github.com/thinker3197/progressively/blob/master/README.md","devDependencies":{"grunt":"^1.0.1","grunt-cli":"^1.2.0","grunt-contrib-cssmin":"^1.0.2","grunt-contrib-jshint":"^1.0.0","grunt-contrib-uglify":"^2.0.0"},"gitHead":"c836d89a9cc38b68cb054c16c8c70dd771589fc3","_id":"progressively@1.0.0","_shasum":"21926828e2e8e7f4c6e52dc5e20a10fe4d91039d","_from":".","_npmVersion":"3.10.6","_nodeVersion":"5.5.0","_npmUser":{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"},"dist":{"shasum":"21926828e2e8e7f4c6e52dc5e20a10fe4d91039d","tarball":"https://registry.npmjs.org/progressively/-/progressively-1.0.0.tgz","integrity":"sha512-iJAqIkdS8fDGL7faJmsgKTABeWW7BXD+7r+acOE2tBXJ72f5QGI/J18LckjIq4k8VeTTTVaSNw7MboaDUNViAg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCda8ioYzi1yhP/h0UPVT84u/yTgWfYmAIQJivJNDfKEgIgRSxDQ880xvuUyvcKaYVJAMpVfa4QlPUQghrRSgE1erw="}]},"maintainers":[{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/progressively-1.0.0.tgz_1474920552544_0.29317405889742076"}},"1.0.2":{"name":"progressively","version":"1.0.2","description":"A JavaScript library to load images progressively","main":"./dist/progressively.min.js && ./dist/progressively.min.css","scripts":{"build":"grunt"},"repository":{"type":"git","url":"git+https://github.com/thinker3197/progressively.git"},"keywords":["progressive","lazy-load","images"],"author":{"name":"Ashish"},"license":"MIT","bugs":{"url":"https://github.com/thinker3197/progressively/issues"},"homepage":"https://github.com/thinker3197/progressively/blob/master/README.md","devDependencies":{"grunt":"^1.0.1","grunt-cli":"^1.2.0","grunt-contrib-cssmin":"^1.0.2","grunt-contrib-jshint":"^1.0.0","grunt-contrib-uglify":"^2.0.0"},"gitHead":"9abb5968c1d1325e4746ba368a56ff61430e5743","_id":"progressively@1.0.2","_shasum":"7b177b30cae7d085036322466d524e62e5b8c2f2","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.1","_npmUser":{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"},"dist":{"shasum":"7b177b30cae7d085036322466d524e62e5b8c2f2","tarball":"https://registry.npmjs.org/progressively/-/progressively-1.0.2.tgz","integrity":"sha512-3nvQ4pCzbQUtcOuMxqfiTl3i1xjZNF7AB6aMv5WkAE2jZFlwieKMVMP+SmG3inwkmOJbpSdqhVowAoUHVwPOmA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfbQ+1x0cjUr6m8VGrGJ/Qd4y/1tHtqB6crD0nX0W16AIgD80XoZ4gxHOJngRV5nGKg7udftXYcJHGFnvivA6uG/0="}]},"maintainers":[{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/progressively-1.0.2.tgz_1487872583540_0.3286425624974072"}},"1.1.2":{"name":"progressively","version":"1.1.2","description":"A JavaScript library to load images progressively","main":"dist/progressively.min.js","scripts":{"lint":"standard \"src/**/*.js\"","build:css":"cssnano src/progressively.css dist/progressively.min.css","build:js":"uglifyjs src/progressively.js -cm -o dist/progressively.min.js"},"repository":{"type":"git","url":"git+https://github.com/thinker3197/progressively.git"},"keywords":["progressive","lazy-load","images"],"author":{"name":"Ashish"},"license":"MIT","bugs":{"url":"https://github.com/thinker3197/progressively/issues"},"homepage":"https://github.com/thinker3197/progressively/blob/master/README.md","devDependencies":{"cssnano-cli":"^1.0.5","standard":"^8.6.0","uglify-js":"^2.7.5"},"standard":{"globals":["define","Image"]},"gitHead":"03a450dd442bce844670ae7d0f0d4b3ab75137a7","_id":"progressively@1.1.2","_shasum":"fff35e10947674be360b8df9ad0dabf608ec9d81","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.1","_npmUser":{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"},"dist":{"shasum":"fff35e10947674be360b8df9ad0dabf608ec9d81","tarball":"https://registry.npmjs.org/progressively/-/progressively-1.1.2.tgz","integrity":"sha512-UthRGIzGsNBSqJ+IuP3jyMTUDcs2u1kBL0AHd48Rhegks4tOn1VsHeH8ZKf8TbCGGl+6e3QZoEsFCCdOi17zLg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHMeJvxzIWHi91WSMgqACvSB5Q4Rm3LIyGqR1n9XnUWGAiEA92b/ZS4N1f7VvTR2cbiUr5vC+syrGb0tEma5FgfC2xI="}]},"maintainers":[{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/progressively-1.1.2.tgz_1489587890636_0.6616503978148103"}},"1.1.3":{"name":"progressively","version":"1.1.3","description":"A JavaScript library to load images progressively","main":"dist/progressively.min.js","scripts":{"lint":"standard \"src/**/*.js\"","build:css":"cssnano src/progressively.css dist/progressively.min.css","build:js":"uglifyjs src/progressively.js -cm -o dist/progressively.min.js"},"repository":{"type":"git","url":"git+https://github.com/thinker3197/progressively.git"},"keywords":["progressive","lazy-load","images"],"author":{"name":"Ashish"},"license":"MIT","bugs":{"url":"https://github.com/thinker3197/progressively/issues"},"homepage":"https://github.com/thinker3197/progressively/blob/master/README.md","devDependencies":{"cssnano-cli":"^1.0.5","standard":"^8.6.0","uglify-js":"^3.0.11"},"standard":{"globals":["define","Image"]},"gitHead":"b6d6b756fb67ed20a4a4ab426c468183ae36eb35","_id":"progressively@1.1.3","_shasum":"33ad7fcd42b63c204ae19a63b06a8cdb4c72a743","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.0","_npmUser":{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"},"dist":{"shasum":"33ad7fcd42b63c204ae19a63b06a8cdb4c72a743","tarball":"https://registry.npmjs.org/progressively/-/progressively-1.1.3.tgz","integrity":"sha512-QARjaOMhuRIiJ3dLHuABPzdLHch2HTB6ETocKQzXgsBXlYSx+tVKXL8UUk/XDm19+FV+Z6NtpA6EjvPR2R7AEg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDsrVDghgM17xcbmTzjN/qbYfUWqwZNOrrGYYhUX+hTQIgCXB4f9ZIJP6iLpEsJlTECR/TJOaokS/vbzaavQRdfiw="}]},"maintainers":[{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/progressively-1.1.3.tgz_1498153417792_0.48540484393015504"}},"1.1.4":{"name":"progressively","version":"1.1.4","description":"A JavaScript library to load images progressively","main":"dist/progressively.min.js","scripts":{"lint":"standard \"src/**/*.js\"","build:css":"cssnano src/progressively.css dist/progressively.min.css","build:js":"uglifyjs src/progressively.js -cm -o dist/progressively.min.js"},"repository":{"type":"git","url":"git+https://github.com/thinker3197/progressively.git"},"keywords":["progressive","lazy-load","images"],"author":{"name":"Ashish"},"license":"MIT","bugs":{"url":"https://github.com/thinker3197/progressively/issues"},"homepage":"https://github.com/thinker3197/progressively/blob/master/README.md","devDependencies":{"cssnano-cli":"^1.0.5","standard":"^8.6.0","uglify-js":"^3.0.11"},"standard":{"globals":["define","Image"]},"gitHead":"8fca6ddf073fab9207e6defb1553445dda3f5270","_id":"progressively@1.1.4","_shasum":"9e6d4b5260cddca1e2ea4833b59aec8dedd47b0a","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.0","_npmUser":{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"},"dist":{"shasum":"9e6d4b5260cddca1e2ea4833b59aec8dedd47b0a","tarball":"https://registry.npmjs.org/progressively/-/progressively-1.1.4.tgz","integrity":"sha512-duLCvQOhofKnTsP8YbFhXZZyUpeJ8QZ9p5nBM5Rivl7RibrihXzCCfqiVTVMHuIoLWyZO9gY3DONbEt/X27SUw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICv4X5620DDd/9/233HVZrXAOkGv3m1JtmLJpAG+Fjv0AiBSzG4atJqEO41XMYttnbIop153i9cJ8Mkf4mKPmZMZCQ=="}]},"maintainers":[{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/progressively-1.1.4.tgz_1502169839976_0.8545258175581694"}},"1.1.5":{"name":"progressively","version":"1.1.5","description":"A JavaScript library to load images progressively","main":"dist/progressively.min.js","scripts":{"lint":"standard \"src/**/*.js\"","build:css":"cssnano src/progressively.css dist/progressively.min.css","build:js":"uglifyjs src/progressively.js -cm -o dist/progressively.min.js"},"repository":{"type":"git","url":"git+https://github.com/thinker3197/progressively.git"},"keywords":["progressive","lazy-load","images"],"author":{"name":"Ashish"},"license":"MIT","bugs":{"url":"https://github.com/thinker3197/progressively/issues"},"homepage":"https://github.com/thinker3197/progressively/blob/master/README.md","devDependencies":{"cssnano-cli":"^1.0.5","standard":"^8.6.0","uglify-js":"^3.0.11"},"standard":{"globals":["define","Image"]},"gitHead":"e7ce4cadfa2bdc61fbb619fc1927ba34d38af721","_id":"progressively@1.1.5","_shasum":"89ea834b8ebd2d83e10a82e5e8e120f5783ece02","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.0","_npmUser":{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"},"dist":{"shasum":"89ea834b8ebd2d83e10a82e5e8e120f5783ece02","tarball":"https://registry.npmjs.org/progressively/-/progressively-1.1.5.tgz","integrity":"sha512-PWhR4zP+4r5ARqFlxhqmix1NJBVKxfwj5HqcuuoBNDKFs+ADSXpx9kTsCdaT1dzo3mTOVIR6PZaFpx2UbYEHXg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEzvjZYH9N8E7wXYJ+1Cc/sAB0pS3ztLhQJ6D444CE6sAiBlZhUZTahaXGPy9brevayfw6Gu2YS9cUWyczFeO1A5ww=="}]},"maintainers":[{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/progressively-1.1.5.tgz_1503939431734_0.6654447608161718"}},"1.2.5":{"name":"progressively","version":"1.2.5","description":"A JavaScript library to load images progressively","main":"dist/progressively.min.js","scripts":{"lint":"standard \"src/**/*.js\"","build:css":"cssnano src/progressively.css dist/progressively.min.css","build:js":"uglifyjs src/progressively.js -cm -o dist/progressively.min.js"},"repository":{"type":"git","url":"git+https://github.com/thinker3197/progressively.git"},"keywords":["progressive","lazy-load","images"],"author":{"name":"Ashish"},"license":"MIT","bugs":{"url":"https://github.com/thinker3197/progressively/issues"},"homepage":"https://github.com/thinker3197/progressively/blob/master/README.md","devDependencies":{"cssnano-cli":"^1.0.5","standard":"^8.6.0","uglify-js":"^3.0.11"},"standard":{"globals":["define","Image"]},"gitHead":"b6a919d82d59db8f77783dad5ce6bc2095cf03c3","_id":"progressively@1.2.5","_shasum":"a7399fb9412b94735d8b776702ad2be43c92c4fa","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.10.0","_npmUser":{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"},"dist":{"shasum":"a7399fb9412b94735d8b776702ad2be43c92c4fa","tarball":"https://registry.npmjs.org/progressively/-/progressively-1.2.5.tgz","integrity":"sha512-VenKpxwFAEVuH9YPkGrTPaEt4nWrtgomu3aOMYJm+fAAeCXLXC1tYmN4H+sIfVA537JLZc/XmFnOFREvA76gQQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICyoFH5KNJKKeRF90elxmtJdIfjkQ58AkJjnra3ecdQ3AiA9A5uYLkANgIJbcT9/MVQyDo+4iYFEXajd/jtRgMIPlg=="}]},"maintainers":[{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/progressively-1.2.5.tgz_1509768947844_0.12039876030758023"}}},"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> 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, < 1.2kB when minified & gzipped! It will load the full-size images only when the user browses to that part of the page, saving bandwidth & 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<script src=\"https://cdn.jsdelivr.net/npm/progressively/dist/progressively.min.js\"></script>\n<!-- or -->\n<script src=\"https://unpkg.com/progressively/dist/progressively.min.js\"></script>\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<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/progressively/dist/progressively.min.css\">\n<!-- or -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/progressively/dist/progressively.min.css\">\n```\n\n## Usage\n\nAdd a image to your `HTML` file setting the `src` attribute containing the lower quality image (< 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<figure class=\"progressive\">\n  <img class=\"progressive__img progressive--not-loaded\" data-progressive=\"img/highQualityImg.png\" src=\"img/lowQualityImg.png\">\n</figure>\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<figure class=\"progressive\">\n  <img class=\"progressive__img progressive--not-loaded\" data-progressive=\"img/highQualityImg.png\" data-progressive-sm=\"img/mediumQualityImg.png\" src=\"img/lowQualityImg.png\">\n</figure>\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<div class=\"progressive__bg progressive--not-loaded\" data-progressive=\"img/highQualityImg.png\" data-progressive-sm=\"img/mediumQualityImg.png\" style=\"background-image: url('img/lowQualityImg.png');\"></div>\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) &copy; [Ashish](https://thinker3197.github.io/)\n","maintainers":[{"name":"thinker3197","email":"ashishgupta.3197@gmail.com"}],"time":{"modified":"2022-06-24T17:40:41.968Z","created":"2016-09-26T20:09:14.397Z","1.0.0":"2016-09-26T20:09:14.397Z","1.0.2":"2017-02-23T17:56:24.145Z","1.1.2":"2017-03-15T14:24:53.710Z","1.1.3":"2017-06-22T17:43:38.888Z","1.1.4":"2017-08-08T05:24:02.123Z","1.1.5":"2017-08-28T16:57:13.499Z","1.2.5":"2017-11-04T04:15:49.821Z"},"homepage":"https://github.com/thinker3197/progressively/blob/master/README.md","keywords":["progressive","lazy-load","images"],"repository":{"type":"git","url":"git+https://github.com/thinker3197/progressively.git"},"author":{"name":"Ashish"},"bugs":{"url":"https://github.com/thinker3197/progressively/issues"},"license":"MIT","readmeFilename":"README.md"}