├── .gitignore
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── bower.json
├── demo.gif
├── dist
    ├── progressively.min.css
    └── progressively.min.js
├── docs
    ├── favicon.ico
    ├── index.html
    ├── progressively.min.css
    └── progressively.min.js
├── package.json
└── src
    ├── progressively.css
    └── progressively.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | .vscode
 3 | 
 4 | # Logs
 5 | logs
 6 | *.log
 7 | npm-debug.log*
 8 | yarn-debug.log*
 9 | yarn-error.log*
10 | 
11 | # Runtime data
12 | pids
13 | *.pid
14 | *.seed
15 | *.pid.lock
16 | 
17 | # Directory for instrumented libs generated by jscoverage/JSCover
18 | lib-cov
19 | 
20 | # Coverage directory used by tools like istanbul
21 | coverage
22 | 
23 | # nyc test coverage
24 | .nyc_output
25 | 
26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
27 | .grunt
28 | 
29 | # Bower dependency directory (https://bower.io/)
30 | bower_components
31 | 
32 | # node-waf configuration
33 | .lock-wscript
34 | 
35 | # Compiled binary addons (http://nodejs.org/api/addons.html)
36 | build/Release
37 | 
38 | # Dependency directories
39 | node_modules/
40 | jspm_packages/
41 | 
42 | # Typescript v1 declaration files
43 | typings/
44 | 
45 | # Optional npm cache directory
46 | .npm
47 | 
48 | # Optional eslint cache
49 | .eslintcache
50 | 
51 | # Optional REPL history
52 | .node_repl_history
53 | 
54 | # Output of 'npm pack'
55 | *.tgz
56 | 
57 | # Yarn Integrity file
58 | .yarn-integrity
59 | 
60 | # dotenv environment variables file
61 | .env
62 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing to progressively
 2 | First off, thanks for taking the time to contribute!
 3 | 
 4 | Now, take a moment to be sure your contributions make sense to everyone else.
 5 | These are just guidelines, not rules.
 6 | Use your best judgment, and feel free to propose changes to this document in a pull request.
 7 | 
 8 | ## Reporting Issues
 9 | Found a problem? Want a new feature? First of all see if your issue or idea has [already been reported](../../issues).
10 | If don't, just open a [new clear and descriptive issue](../../issues/new).
11 | 
12 | ## Submitting pull requests
13 | Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.
14 | - Fork it!
15 | - Clone your fork: `git clone https://github.com/<your-username>/progressively`
16 | - Navigate to the newly cloned directory: `cd progressively`
17 | - Create a new branch for the new feature: `git checkout -b my-new-feature`
18 | - Install the tools necessary for development: `npm install`
19 | - Make your changes.
20 | - Commit your changes: `git commit -am 'Add some feature'`
21 | - Push to the branch: `git push origin my-new-feature`
22 | - Submit a pull request with full remarks documenting your changes.
23 | 
24 | ## Testing
25 | Every time you write a test, remember to answer all the questions:
26 | 
27 | 1. What are you testing?
28 | 2. What should it do?
29 | 3. What is the actual output?
30 | 4. What is the expected output?
31 | 5. How can the test be reproduced?
32 | 
33 | ## Code Style
34 | Follows the [JavaScript Standard Style](http://standardjs.com/).
35 | 
36 | ## Scripts
37 | - `npm run lint`: lint the files.
38 | - `npm run build:css`: minify and add vendor prefixes (if needed) the css file.
39 | - `npm run build:js`: uglify the js file.
40 | 
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Ashish
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Progressively
  2 | 
  3 | [![Travis](https://img.shields.io/travis/thinker3197/progressively.svg)](https://travis-ci.org/thinker3197/progressively)
  4 | [![Coveralls](https://img.shields.io/coveralls/thinker3197/progressively.svg)](https://coveralls.io/github/thinker3197/progressively?branch=master)
  5 | [![npm (scoped)](https://img.shields.io/npm/v/progressively.svg)](https://www.npmjs.com/package/progressively)
  6 | [![David](https://img.shields.io/david/thinker3197/progressively.svg)](https://david-dm.org/thinker3197/progressively)
  7 | [![Standard - JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
  8 | 
  9 | > A JavaScript library to load images progressively
 10 | 
 11 | It’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).
 12 | 
 13 | ![demo-image](https://raw.githubusercontent.com/thinker3197/progressively/master/demo.gif)
 14 | 
 15 | ## Table of Contents
 16 | 
 17 | - [Install](#install)
 18 | - [Usage](#usage)
 19 | - [API](#api)
 20 | - [Contribute](#contribute)
 21 | - [License](#license)
 22 | 
 23 | ## Install
 24 | 
 25 | This project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Go check them out if you don't have them locally installed.
 26 | 
 27 | ```sh
 28 | $ npm install --save progressively
 29 | ```
 30 | 
 31 | Alternatively you can use [Bower](https://bower.io/).
 32 | 
 33 | ```sh
 34 | $ bower install progressively
 35 | ```
 36 | 
 37 | With a module bundler like [rollup](http://rollupjs.org/) or [webpack](https://webpack.js.org/), use as you would anything else:
 38 | 
 39 | ```javascript
 40 | // using ES6 modules
 41 | import progressively from 'progressively'
 42 | 
 43 | // using CommonJS modules
 44 | var progressively = require('progressively')
 45 | ```
 46 | 
 47 | The [UMD](https://github.com/umdjs/umd) build is also available on CDN:
 48 | 
 49 | ```html
 50 | <script src="https://cdn.jsdelivr.net/npm/progressively/dist/progressively.min.js"></script>
 51 | <!-- or -->
 52 | <script src="https://unpkg.com/progressively/dist/progressively.min.js"></script>
 53 | ```
 54 | Once loaded, you can access the library on `window.progressively`.
 55 | 
 56 | You also need to embed the css file at your page
 57 | 
 58 | ```html
 59 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/progressively/dist/progressively.min.css">
 60 | <!-- or -->
 61 | <link rel="stylesheet" href="https://unpkg.com/progressively/dist/progressively.min.css">
 62 | ```
 63 | 
 64 | ## Usage
 65 | 
 66 | Add 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.
 67 | 
 68 | You 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.
 69 | 
 70 | ```html
 71 | <figure class="progressive">
 72 |   <img class="progressive__img progressive--not-loaded" data-progressive="img/highQualityImg.png" src="img/lowQualityImg.png">
 73 | </figure>
 74 | ```
 75 | 
 76 | And initiate the script.
 77 | 
 78 | ```js
 79 | progressively.init()
 80 | ```
 81 | 
 82 | See [demo](https://thinker3197.github.io/progressively) for examples.
 83 | 
 84 | ### Use medium quality images for mobile devices
 85 | 
 86 | You 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.
 87 | 
 88 | ```html
 89 | <figure class="progressive">
 90 |   <img class="progressive__img progressive--not-loaded" data-progressive="img/highQualityImg.png" data-progressive-sm="img/mediumQualityImg.png" src="img/lowQualityImg.png">
 91 | </figure>
 92 | ```
 93 | 
 94 | ### Use as bg-image
 95 | 
 96 | You can also use progressively for background-images. Simply use `progressive__bg` instead of `progressive__img`:
 97 | 
 98 | ```html
 99 | <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>
100 | ```
101 | 
102 | ## API
103 | 
104 | ### progressively.init(options)
105 | 
106 | The `init()` API has a few options
107 | 
108 | #### throttle
109 | Type: `Number` Default: `300`
110 | 
111 | The `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.
112 | 
113 | #### delay
114 | Type: `Number` Default: `100` value
115 | 
116 | The `delay` function sets the timout value for images to start load asynchronously. Ideally it's value should be low.
117 | 
118 | #### smBreakpoint
119 | Type: `Number` Default: `600` value
120 | 
121 | The `loadImage` function uses this value, to load images in a medium quality (if defined and if the user's viewport is smaller than smBreakpoint).
122 | 
123 | #### onLoadComplete
124 | Type: `Function` Arguments: `None`
125 | 
126 | The `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.
127 | 
128 | #### onLoad
129 | Type: `Function` Arguments: `HTMLElement`
130 | 
131 | The `onLoad` function is invoked whenever an image elements finishes loading. It accepts `HTMLElement` as an argument which is the current element that is loaded.
132 | 
133 | ```js
134 | progressively.init({
135 |   delay: 50,
136 |   throttle: 300,
137 |   smBreakpoint: 600,
138 |   onLoad: function(elem) {
139 |     console.log(elem);
140 |   },
141 |   onLoadComplete: function() {
142 |     console.log('All images have finished loading!');
143 |   }
144 | });
145 | ```
146 | 
147 | ### progressively.render()
148 | 
149 | Progressively 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`.
150 | 
151 | ## Contribute
152 | See the [contributing file](CONTRIBUTING.md) for instructions.
153 | 
154 | ## License
155 | [MIT license](LICENSE) &copy; [Ashish](https://thinker3197.github.io/)
156 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "progressively",
 3 |   "description": "A JavaScript library to load images progressively",
 4 |   "main": "./src/progressively.js",
 5 |   "authors": [
 6 |     "Ashish"
 7 |   ],
 8 |   "license": "MIT",
 9 |   "keywords": [
10 |     "progressive",
11 |     "lazy-load",
12 |     "images"
13 |   ],
14 |   "homepage": "https://github.com/thinker3197/progressively"
15 | }
16 | 


--------------------------------------------------------------------------------
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thinker3197/progressively/9aea32f73bb27828b1c3a7832bfb3035d52c0c60/demo.gif


--------------------------------------------------------------------------------
/dist/progressively.min.css:
--------------------------------------------------------------------------------
1 | .progressive{overflow:hidden;position:relative;background:#efefef}.progressive__img{width:100%;height:100%;transform:translateZ(0)}.progressive--not-loaded{filter:blur(30px);transform:scale(1.1)}.progressive--is-loaded{filter:blur(20px);animation:a .5s both;transform:scale(1)}@keyframes a{0%{filter:blur(20px)}to{filter:blur(0)}}


--------------------------------------------------------------------------------
/dist/progressively.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"function"==typeof define&&define.amd?define(function(){return t(e)}):"object"==typeof exports?module.exports=t:e.progressively=t(e)}(this,function(e){"use strict";function t(e,t){var n={};for(var o in e)n[o]=t.hasOwnProperty(o)?t[o]:e[o];return n}function n(e){var t=e.getBoundingClientRect(),n=t.top,o=t.height;e=e.parentNode;do{if(t=e.getBoundingClientRect(),!(n<=t.bottom))return!1;if(n+o<=t.top)return!1;e=e.parentNode}while(e!==document.body&&e!==document);return n<=document.documentElement.clientHeight}function o(e,t){setTimeout(function(){var n=new Image;n.onload=function(){e.classList.remove("progressive--not-loaded"),e.classList.add("progressive--is-loaded"),e.classList.contains("progressive__bg")?e.style["background-image"]='url("'+this.src+'")':e.src=this.src,d(e)},r()<=t.smBreakpoint&&e.getAttribute("data-progressive-sm")?(e.classList.add("progressive--loaded-sm"),n.src=e.getAttribute("data-progressive-sm")):(e.classList.remove("progressive--loaded-sm"),n.src=e.getAttribute("data-progressive"))},t.delay)}function r(){return Math.max(document.documentElement.clientWidth,window.innerWidth||0)}function i(){c||(clearTimeout(c),c=setTimeout(function(){l.check(),l.render(),c=null},s.throttle))}var s,c,d,a,l={};return d=function(){},s={throttle:300,delay:100,onLoadComplete:function(){},onLoad:function(){},smBreakpoint:600},l.init=function(n){n=n||{},s=t(s,n),d=s.onLoad||d,a=[].slice.call(document.querySelectorAll(".progressive__img, .progressive__bg")),l.render(),document.addEventListener?(e.addEventListener("scroll",i,!1),e.addEventListener("resize",i,!1),e.addEventListener("load",i,!1)):(e.attachEvent("onscroll",i),e.attachEvent("onresize",i),e.attachEvent("onload",i))},l.render=function(){for(var e,t=a.length-1;t>=0;--t)e=a[t],n(e)&&e.classList.contains("progressive--not-loaded")&&(o(e,s),a.splice(t,1));this.check()},l.check=function(){a.length||(s.onLoadComplete(),this.drop())},l.drop=function(){document.removeEventListener?(e.removeEventListener("scroll",i),e.removeEventListener("resize",i)):(e.detachEvent("onscroll",i),e.detachEvent("onresize",i)),clearTimeout(c)},l});


--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thinker3197/progressively/9aea32f73bb27828b1c3a7832bfb3035d52c0c60/docs/favicon.ico


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--[if lt IE 7]>      <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  3 | <!--[if IE 7]>         <html class="lt-ie9 lt-ie8"> <![endif]-->
  4 | <!--[if IE 8]>         <html class="lt-ie9"> <![endif]-->
  5 | <!--[if gt IE 8]><!-->
  6 | <html>
  7 | <!--<![endif]-->
  8 | 
  9 | <head>
 10 |     <meta charset="utf-8">
 11 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 12 |     <title>Progressively - Load Images progressively</title>
 13 |     <meta name="description" content="A JavaScript library to load images progressively.">
 14 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 15 |     <link rel="shortcut icon" href="favicon.ico" />
 16 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
 17 |     <link rel="stylesheet" href="progressively.min.css">
 18 |     <style type="text/css">
 19 |     @import url(http://fonts.googleapis.com/css?family=Cabin+Condensed:500&text=Fork%20me%20on%20GitHub);
 20 |     
 21 |     body {
 22 |         margin: 0;
 23 |         background: #9692FF;
 24 |         overflow-x: hidden;
 25 |         font-family: 'Open Sans', sans-serif;
 26 |     }
 27 |     
 28 |     figure {
 29 |         height: 200px;
 30 |         max-width: 600px;
 31 |         margin: 3% auto;
 32 |     }
 33 |     
 34 |     .img-wrapper {
 35 |         width: 300px;
 36 |         height: auto;
 37 |         margin: 4px auto;
 38 |         margin-bottom: 12px;
 39 |         position: relative;
 40 |         background-color: #9996ff;
 41 |         margin-left: calc(50% - 150px);
 42 |         box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
 43 |     }
 44 |     
 45 |     .heading {
 46 |         width: 100vw;
 47 |         height: auto;
 48 |         padding: 1%;
 49 |         margin: -2px auto;
 50 |         position: relative;
 51 |     }
 52 |     
 53 |     .heading__title {
 54 |         color: #FFFFFF;
 55 |         text-align: center;
 56 |     }
 57 |     
 58 |     .heading__title h1 {
 59 |         color: #FFEFB9;
 60 |     }
 61 |     
 62 |     .heading__info {
 63 |         display: none;
 64 |     }
 65 |     
 66 |     .heading__info--wrapper {
 67 |         padding: 2%;
 68 |         background-color: #b4b2f7;
 69 |     }
 70 |     
 71 |     .foot {
 72 |         left: 0;
 73 |         right: 0;
 74 |         bottom: 0;
 75 |         padding: 15%;
 76 |         position: relative;
 77 |         text-align: center;
 78 |     }
 79 |     
 80 |     .foot__button {
 81 |         color: #fff;
 82 |         font-size: 1.45em;
 83 |         padding: 20px 60px;
 84 |         background: #FF9800;
 85 |         border-radius: 100px;
 86 |         text-decoration: none;
 87 |     }
 88 |     
 89 |     .header__info__button {
 90 |         display: none;
 91 |     }
 92 |     
 93 |     @media(min-width: 768px) {
 94 |         body {
 95 |             margin: 2%;
 96 |         }
 97 |         figure {
 98 |             height: 350px;
 99 |             margin: 3% auto;
100 |         }
101 |         .img-wrapper {
102 |             width: 40vw;
103 |             position: absolute;
104 |             margin: -30px auto;
105 |         }
106 |         .heading {
107 |             right: 0;
108 |             width: 60vw;
109 |             position: absolute;
110 |         }
111 |         .heading__info {
112 |             color: #263238;
113 |             display: inherit;
114 |             padding-top: 1%;
115 |             padding-left: 14%;
116 |             padding-right: 4%;
117 |         }
118 |         .foot {
119 |             display: none;
120 |         }
121 |         .header__info__button {
122 |             color: #fff;
123 |             width: 100px;
124 |             margin: 5% 35%;
125 |             display: inherit;
126 |             overflow: hidden;
127 |             font-size: 1.45em;
128 |             padding: 20px 60px;
129 |             background: #FF9800;
130 |             border-radius: 100px;
131 |             text-decoration: none;
132 |         }
133 |     }
134 |     
135 |     pre {
136 |         font-family: "Courier 10 Pitch", Courier, monospace;
137 |         font-size: 95%;
138 |         line-height: 140%;
139 |         white-space: pre;
140 |         white-space: pre-wrap;
141 |         white-space: -moz-pre-wrap;
142 |         white-space: -o-pre-wrap;
143 |     }
144 |     
145 |     code {
146 |         font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
147 |         font-size: 95%;
148 |         line-height: 140%;
149 |         white-space: pre;
150 |         white-space: pre-wrap;
151 |         white-space: -moz-pre-wrap;
152 |         white-space: -o-pre-wrap;
153 |     }
154 |     
155 |     body {
156 |         overflow-x: hidden;
157 |     }
158 |     
159 |     .ribbon {
160 |         z-index: 1;
161 |         position: absolute;
162 |         top: 42px;
163 |         width: 200px;
164 |         padding: 1px 0;
165 |         background: #000;
166 |         color: #eee;
167 |         -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
168 |         -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
169 |         box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
170 |     }
171 |     
172 |     .ribbon.right {
173 |         right: -42px;
174 |         -moz-transform: rotate(45deg);
175 |         -webkit-transform: rotate(45deg);
176 |         -o-transform: rotate(45deg);
177 |         -ms-transform: rotate(45deg);
178 |         transform: rotate(45deg);
179 |     }
180 | 
181 |     .ribbon a,
182 |     .ribbon a:visited,
183 |     .ribbon a:active,
184 |     .ribbon a:hover {
185 |         display: block;
186 |         padding: 1px 0;
187 |         height: 24px;
188 |         line-height: 24px;
189 |         color: inherit;
190 |         text-align: center;
191 |         text-decoration: none;
192 |         font-family: 'Cabin Condensed', sans-serif;
193 |         font-size: 16px;
194 |         font-weight: 500;
195 |         border: 1px solid rgba(255, 255, 255, 0.3);
196 |         -moz-text-shadow: 0 0 10px rgba(0, 0, 0, 0.31);
197 |         -webkit-text-shadow: 0 0 10px rgba(0, 0, 0, 0.31);
198 |         text-shadow: 0 0 10px rgba(0, 0, 0, 0.31);
199 |     }
200 |     
201 |     .ribbon.black {
202 |         background: #000;
203 |     }
204 |     </style>
205 | </head>
206 | 
207 | <body>
208 |     <div class="ribbon right black" >
209 |         <a href="https://github.com/thinker3197/progressively">Fork me on GitHub</a>
210 |     </div>
211 |     <header class="heading">
212 |         <div class="heading__title">
213 |             <h1>Progressively</h1>
214 |             <p>A JavaScript library to load images progressively.</p>
215 |         </div>
216 |         <div class="heading__info">
217 |             <div class="heading__info--wrapper">
218 |                 <p>Progressively is a javascript library for loading images progressively. It’s written entirely in JavaScript so it doesn’t depend on 3rd-party libraries like jQuery. It's super small,
219 |                     < 1.2kB when minified & gzipped! It will load images on when user browse to the page, saving bandwidth & server requests. 
220 |                 </p>
221 |                 <h2>Usage & Api</h2>
222 |                 <ul>
223 |                     <li>
224 |                         <h3>Installation</h3>
225 |                         <code>bower install progressively</code>
226 |                         <br>
227 |                         <p>OR</p>
228 |                         <code>npm install progressively</code>
229 |                     </li>
230 |                     <li>
231 |                         <h3>Add Files</h3>
232 |                         <code>&lt;link rel="stylesheet" src="progressively.min.css"></code>
233 |                         <br>
234 |                         <br>
235 |                         <code>&lt;script type="text/javascript" src="progressively.min.js"></code>
236 |                     </li>
237 |                     <li>
238 |                         <h3>Initialize</h3>
239 |                         <code>progressively.init(options);</code>
240 |                     </li>
241 |                     <li>
242 |                         <h3>.init() (options)</h3>
243 |                         <p>The init() API takes a few options</p>
244 |                         <h4>throttle</h4>
245 |                         <p>Type: <code>Number</code>, Default: <code>300</code></p>
246 |                         <p>The 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.</p>
247 |                         <h4>delay</h4>
248 |                         <p>Type: <code>Number</code>, Default: <code>100</code></p>
249 |                         <p>The delay function sets the timout value for images to start load asynchronously. Ideally it's value should be low.</p>
250 |                         <h4>onLoad</h4>
251 |                         <p>Type: <code>Function</code>, Arguments: <code>HTMLElement</code></p>
252 |                         <p>The imgload function is invoked whenever an image elements finishes loading. It accepts HTMLElement as an argument which is the current element that is loaded.</p>
253 |                         <h4>onLoadComplete</h4>
254 |                         <p>Type: <code>Function</code>, Arguments: None</p>
255 |                         <p>The afterload function is callback function which executes when all images have loaded. It is fired when all the image elements have the <code>*--is-loaded</code> class.</p>
256 |                     </li>
257 |                 </ul>
258 |             </div>
259 |             <a href="https://github.com/thinker3197/progressively" class="header__info__button">Download</a>
260 |         </div>
261 |     </header>
262 |     <div class="img-wrapper">
263 |         <figure class="progressive">
264 |             <img class="progressive__img progressive--not-loaded" data-progressive="https://cdn-images-1.medium.com/max/800/1*wKAhKZPXmcSwnq2AcLN-9Q.jpeg" src="https://cdn-images-1.medium.com/freeze/max/30/1*wKAhKZPXmcSwnq2AcLN-9Q.jpeg?q=20">
265 |         </figure>
266 |         <figure class="progressive">
267 |             <img class="progressive__img progressive--not-loaded" data-progressive="https://cdn-images-1.medium.com/max/1200/1*Ah5h2jCdtSGkLsEXp8IBnw.jpeg" src="https://cdn-images-1.medium.com/freeze/max/30/1*Ah5h2jCdtSGkLsEXp8IBnw.jpeg?q=20">
268 |         </figure>
269 |         <figure class="progressive">
270 |             <img class="progressive__img progressive--not-loaded" data-progressive="https://cdn-images-1.medium.com/max/800/1*rmY-DAifY7mELufjdZFQ8w.png" src="https://cdn-images-1.medium.com/freeze/max/30/1*rmY-DAifY7mELufjdZFQ8w.png?q=20">
271 |         </figure>
272 |         <figure class="progressive">
273 |             <img class="progressive__img progressive--not-loaded" data-progressive="https://cdn-images-1.medium.com/max/2000/1*nsz7abpLzf5FyFYfpCFvPA.png" src="https://cdn-images-1.medium.com/freeze/max/30/1*nsz7abpLzf5FyFYfpCFvPA.png?q=20">
274 |         </figure>
275 |         <figure class="progressive">
276 |             <img class="progressive__img progressive--not-loaded" data-progressive="https://cdn-images-1.medium.com/max/2000/1*FFExQFiUc0vVyk7MWt3uvQ.jpeg" src="https://cdn-images-1.medium.com/freeze/max/30/1*FFExQFiUc0vVyk7MWt3uvQ.jpeg?q=20">
277 |         </figure>
278 |         <figure class="progressive">
279 |             <img class="progressive__img progressive--not-loaded" data-progressive="https://cdn-images-1.medium.com/max/800/1*gYbNz3-YopUgUwrR0mFJDg.jpeg" src="https://cdn-images-1.medium.com/freeze/max/30/1*gYbNz3-YopUgUwrR0mFJDg.jpeg?q=20">
280 |         </figure>
281 |     </div>
282 |     <footer class="foot">
283 |         <a href="https://github.com/thinker3197/progressively" class="foot__button">Download</a>
284 |     </footer>
285 |     <script src="progressively.min.js"></script>
286 |     <script>
287 |     progressively.init({
288 |         onLoadComplete: function() {
289 |             console.log('All images loaded!');
290 |         }
291 |     });
292 |     </script>
293 | </body>
294 | 
295 | </html>
296 | 


--------------------------------------------------------------------------------
/docs/progressively.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 |  * progressively 1.1.2
3 |  * https://github.com/thinker3197/progressively
4 |  * @license MIT licensed
5 |  *
6 |  * Copyright (C) 2016-17 Ashish
7 |  */.progressive{overflow:hidden;position:relative;background:#efefef}.progressive__img{width:100%;height:100%;transform:translateZ(0)}.progressive--not-loaded{filter:blur(30px);transform:scale(1.1)}.progressive--is-loaded{filter:blur(20px);animation:a .5s both;transform:scale(1)}@keyframes a{0%{filter:blur(20px)}to{filter:blur(0)}}


--------------------------------------------------------------------------------
/docs/progressively.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * progressively 1.1.2
3 |  * https://github.com/thinker3197/progressively
4 |  * @license MIT licensed
5 |  *
6 |  * Copyright (C) 2016-17 Ashish
7 |  */!function(e,t){"function"==typeof define&&define.amd?define(function(){return t(e)}):"object"==typeof exports?module.exports=t:e.progressively=t(e)}(this,function(e){"use strict";function t(e,t){var n={};for(var o in e)n[o]=t.hasOwnProperty(o)?t[o]:e[o];return n}function n(e){var t=e.getBoundingClientRect(),n=t.top,o=t.height;e=e.parentNode;do{if(t=e.getBoundingClientRect(),!(n<=t.bottom))return!1;if(n+o<=t.top)return!1;e=e.parentNode}while(e!==document.body&&e!==document);return n<=document.documentElement.clientHeight}function o(e,t){setTimeout(function(){var n=new Image;n.onload=function(){e.classList.remove("progressive--not-loaded"),e.classList.add("progressive--is-loaded"),e.classList.contains("progressive__bg")?e.style["background-image"]='url("'+this.src+'")':e.src=this.src,d(e)},r()<=t.smBreakpoint&&e.getAttribute("data-progressive-sm")?(e.classList.add("progressive--loaded-sm"),n.src=e.getAttribute("data-progressive-sm")):(e.classList.remove("progressive--loaded-sm"),n.src=e.getAttribute("data-progressive"))},t.delay)}function r(){return Math.max(document.documentElement.clientWidth,window.innerWidth||0)}function i(){c||(clearTimeout(c),c=setTimeout(function(){l.check(),l.render(),c=null},s.throttle))}var s,c,d,a,l={};return d=function(){},s={throttle:300,delay:100,onLoadComplete:function(){},onLoad:function(){},smBreakpoint:600},l.init=function(n){n=n||{},s=t(s,n),d=s.onLoad||d,a=[].slice.call(document.querySelectorAll(".progressive__img, .progressive__bg")),l.render(),document.addEventListener?(e.addEventListener("scroll",i,!1),e.addEventListener("resize",i,!1),e.addEventListener("load",i,!1)):(e.attachEvent("onscroll",i),e.attachEvent("onresize",i),e.attachEvent("onload",i))},l.render=function(){for(var e,t=a.length-1;t>=0;--t)e=a[t],n(e)&&e.classList.contains("progressive--not-loaded")&&(o(e,s),a.splice(t,1));this.check()},l.check=function(){a.length||(s.onLoadComplete(),this.drop())},l.drop=function(){document.removeEventListener?(e.removeEventListener("scroll",i),e.removeEventListener("resize",i)):(e.detachEvent("onscroll",i),e.detachEvent("onresize",i)),clearTimeout(c)},l});


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "progressively",
 3 |   "version": "1.2.5",
 4 |   "description": "A JavaScript library to load images progressively",
 5 |   "main": "dist/progressively.min.js",
 6 |   "scripts": {
 7 |     "lint": "standard \"src/**/*.js\"",
 8 |     "build:css": "cssnano src/progressively.css dist/progressively.min.css",
 9 |     "build:js": "uglifyjs src/progressively.js -cm -o dist/progressively.min.js"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/thinker3197/progressively.git"
14 |   },
15 |   "keywords": [
16 |     "progressive",
17 |     "lazy-load",
18 |     "images"
19 |   ],
20 |   "author": "Ashish",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/thinker3197/progressively/issues"
24 |   },
25 |   "homepage": "https://github.com/thinker3197/progressively/blob/master/README.md",
26 |   "devDependencies": {
27 |     "cssnano-cli": "^1.0.5",
28 |     "standard": "^8.6.0",
29 |     "uglify-js": "^3.0.11"
30 |   },
31 |   "standard": {
32 |     "globals": [
33 |       "define",
34 |       "Image"
35 |     ]
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/progressively.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * progressively 1.1.2
 3 |  * https://github.com/thinker3197/progressively
 4 |  * @license MIT licensed
 5 |  *
 6 |  * Copyright (C) 2016-17 Ashish
 7 |  */
 8 | 
 9 | .progressive {
10 |   overflow: hidden;
11 |   position: relative;
12 |   background: #efefef;
13 | }
14 | 
15 | .progressive__img {
16 |   width: 100%;
17 |   height: 100%;
18 |   transform: translateZ(0);
19 | }
20 | 
21 | .progressive--not-loaded {
22 |   filter: blur(30px);
23 |   transform: scale(1.1);
24 | }
25 | 
26 | .progressive--is-loaded {
27 |   filter: blur(20px);
28 |   animation: sharpen 0.5s both;
29 |   transform: scale(1);
30 | }
31 | 
32 | @keyframes sharpen {
33 |   from {
34 |     filter: blur(20px);
35 |   }
36 |   to {
37 |     filter: blur(0px);
38 |   }
39 | }


--------------------------------------------------------------------------------
/src/progressively.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 | * progressively 1.1.3
  3 | * https://github.com/thinker3197/progressively
  4 | * @license MIT licensed
  5 | *
  6 | * Copyright (C) 2016-17 Ashish
  7 | */
  8 | 
  9 | ;
 10 | (function (root, factory) {
 11 |   if (typeof define === 'function' && define.amd) {
 12 |     define(function () {
 13 |       return factory(root)
 14 |     })
 15 |   } else if (typeof exports === 'object') {
 16 |     module.exports = factory
 17 |   } else {
 18 |     root.progressively = factory(root)
 19 |   }
 20 | })(this, function (root) {
 21 |   'use strict'
 22 | 
 23 |   var progressively = {}
 24 | 
 25 |   var defaults, poll, onLoad, inodes
 26 | 
 27 |   onLoad = function () {}
 28 | 
 29 |   function extend (primaryObject, secondaryObject) {
 30 |     var o = {}
 31 |     for (var prop in primaryObject) {
 32 |       o[prop] = secondaryObject.hasOwnProperty(prop) ? secondaryObject[prop] : primaryObject[prop]
 33 |     }
 34 |     return o
 35 |   }
 36 | 
 37 | /**
 38 |  * Check if element is currently visible
 39 |  * @param  object DOMElement
 40 |  * @return boolean
 41 |  */
 42 |   function inView (el) {
 43 |     var box = el.getBoundingClientRect()
 44 |     var top = box.top
 45 |     var height = box.height
 46 | 
 47 |     el = el.parentNode
 48 | 
 49 |     do {
 50 |       box = el.getBoundingClientRect()
 51 | 
 52 |       if (!(top <= box.bottom)) {
 53 |         return false
 54 |       }
 55 |       if ((top + height) <= box.top) {
 56 |         return false
 57 |       }
 58 | 
 59 |       el = el.parentNode
 60 |     } while (el !== document.body && el !== document)
 61 | 
 62 |     return top <= document.documentElement.clientHeight
 63 |   }
 64 | 
 65 | /**
 66 |  * Load image and add loaded-class. Loads the minified version, if small display
 67 |  * @param  object DOMElement
 68 |  * @param  object defaults
 69 |  * @return boolean true, if fully loaded; false, if minified version was loaded
 70 |  */
 71 |   function loadImage (el, defaults) {
 72 |     setTimeout(function () {
 73 |       var img = new Image()
 74 | 
 75 |       img.onload = function () {
 76 |         el.classList.remove('progressive--not-loaded')
 77 |         el.classList.add('progressive--is-loaded')
 78 | 
 79 |         if (el.classList.contains('progressive__bg')) {
 80 |           // Load image as css-background-image
 81 |           el.style['background-image'] = 'url("' + this.src + '")'
 82 |         } else {
 83 |           el.src = this.src
 84 |         }
 85 | 
 86 |         onLoad(el)
 87 |       }
 88 | 
 89 | // Load minified version, if viewport-width is smaller than defaults.smBreakpoint:
 90 |       if (getClientWidth() <= defaults.smBreakpoint && el.getAttribute('data-progressive-sm')) {
 91 |         el.classList.add('progressive--loaded-sm')
 92 |         img.src = el.getAttribute('data-progressive-sm')
 93 |       } else {
 94 |         el.classList.remove('progressive--loaded-sm')
 95 |         img.src = el.getAttribute('data-progressive')
 96 |       }
 97 |     }, defaults.delay)
 98 |   }
 99 | 
100 | /**
101 |  * Returns the width of the client's viewport
102 |  * @return integer client-width
103 |  */
104 |   function getClientWidth () {
105 |     return Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
106 |   }
107 | 
108 | /**
109 |  * Listens to an event, and throttles
110 |  */
111 |   function listen () {
112 |     if (poll) {
113 |       return
114 |     }
115 |     clearTimeout(poll)
116 |     poll = setTimeout(function () {
117 |       progressively.check()
118 |       progressively.render()
119 |       poll = null
120 |     }, defaults.throttle)
121 |   }
122 | 
123 |  /*
124 |  * default settings
125 |  */
126 |   defaults = {
127 |     throttle: 300, // appropriate value, don't change unless intended
128 |     delay: 100,
129 |     onLoadComplete: function () {},
130 |     onLoad: function () {},
131 |     smBreakpoint: 600
132 |   }
133 | 
134 | /**
135 |  * Initializer. Finds image-elements and adds listeners.
136 |  * @param  object options
137 |  */
138 |   progressively.init = function (options) {
139 |     options = options || {}
140 | 
141 |     defaults = extend(defaults, options)
142 | 
143 |     onLoad = defaults.onLoad || onLoad
144 | 
145 |     inodes = [].slice.call(document.querySelectorAll('.progressive__img, .progressive__bg'))
146 | 
147 |     progressively.render()
148 | 
149 |     if (document.addEventListener) {
150 |       root.addEventListener('scroll', listen, false)
151 |       root.addEventListener('resize', listen, false)
152 |       root.addEventListener('load', listen, false)
153 |     } else {
154 |       root.attachEvent('onscroll', listen)
155 |       root.attachEvent('onresize', listen)
156 |       root.attachEvent('onload', listen)
157 |     }
158 |   }
159 | 
160 | /**
161 |  * Loads necessary images in small or full quality.
162 |  */
163 |   progressively.render = function () {
164 |     var elem
165 | 
166 |     for (var i = inodes.length - 1; i >= 0; --i) {
167 |       elem = inodes[i]
168 | 
169 |       if (inView(elem) && elem.classList.contains('progressive--not-loaded')) {
170 |         loadImage(elem, defaults)
171 | 
172 |         inodes.splice(i, 1)
173 |       }
174 |     }
175 | 
176 |     this.check()
177 |   }
178 | 
179 | /**
180 |  * Check if all images are loaded in full quality, then drop.
181 |  */
182 |   progressively.check = function () {
183 |     if (!inodes.length) {
184 |       defaults.onLoadComplete()
185 |       this.drop()
186 |     }
187 |   }
188 | 
189 | /**
190 |  * Drops progressively-listeners
191 |  */
192 |   progressively.drop = function () {
193 |     if (document.removeEventListener) {
194 |       root.removeEventListener('scroll', listen)
195 |       root.removeEventListener('resize', listen)
196 |     } else {
197 |       root.detachEvent('onscroll', listen)
198 |       root.detachEvent('onresize', listen)
199 |     }
200 |     clearTimeout(poll)
201 |   }
202 | 
203 |   return progressively
204 | })
205 | 


--------------------------------------------------------------------------------