Allow breakpoints based on viewport or window

[andr3]

Summary: Even though the documentation mentions widths are provided as max-width, in reality, they are (using the same property as media-queries) max-device-width.

---

It is reasonable for authors to need to specify breakpoints in terms of viewport.

To offer backwards compatibility, I added an optional parameter for the breakpoints:

• mode: 'window'(default) or viewport

Tested with these breakpoints configuration:

new Blazy({
    selector: '.responsive-image',
    breakpoints: [{
      width: 600, // max-width
      src: 'data-src-small',
      mode: 'viewport'
    }, {
      width: 99999, // perhaps it should allow max-width to be specified as well, but maybe a future PR for this.
      src: 'data-src-large',
      mode: 'viewport'
    }]
   });

[andr3]

@dinbror...? Any feedback?

[cscd98]

@dinbror @andr3pt We need this please 👍

[dinbror]

@andr3pt: I like the idea. Only concern is that bLazy doesn't update an image on resize so if your browser window is something small when you open it, it'll load the small image and it'll be up-scaled if you resize the browser window to something bigger.

[andr3]

@dinbror check #50, I just opened a PR that I think does just that. I also rebased this with the latest master. I'm not sure if you want the minified version committed too, but it's incl in this PR.