Implement breakpoints based on viewport width (or container width)

[aymaysinnett]

If working for example with bootstrap, it's would be perfect if breakpoints can be based on viewport width.
Suggestion:

• Add option for viewport width

• If set to true, use:
  var viewportWidth = window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;

  if(object.width >= viewportWidth) {
  source = object.src;
  return false;
  }

• instead of:
  if(object.width >= window.screen.width) {
  source = object.src;
  return false;
  }

[dinbror]

Hey @aymaysinnett

If I change it I would also need to implement something for changing the images on resize which I'm not a big fan of.
The reason why I’m looking at the device width and not the width is that I don’t want to load multiple image sources for the same image when you resize (multiple server request per image). And if you have a big screen but the start width of your browser window is something small I don’t want to upscale a low res image if you resize it up.

[aymaysinnett]

Hi, I completely understand, but at least you'll provide the option.
And yes, you will get multiple server requests per image, but only if you hit a breakpoint on upscaling.

Considering that upscaling would most likely only happen on desktop, I don't think that's a major issue compared to the disconnect between viewport and screensize for image loading.

[mishterk]

+1 for this!

At the very least, it would be great if we could optionally enable this.

Basing the image sizes on viewport seems a lot more logical, as the viewport restricts the width of a responsive website, not the device. Swapping out the source of an image on resize isn't a drama and as @aymaysinnett mentioned, it's mostly a desktop scenario where this would happen (unless there is a change breakpoint between a mobile device's width and height, whereby orientationchange should be honoured).

I base all my work on the viewport and rely mostly on a debouncedresize event (repo) to handle this sort of transition.

If this behaviour makes it's way into this library, I'll be all over it! (because it's rad, nicely featured, and works with background images).

Cheers!