Resizing & breakpoints

[dinbror]

Resizing & breakpoints

[dinbror]

I understand the use case and issue. Will see if I somehow can add support for it.

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 browser window is tiny when you open it, I don’t want to upscale a low res image if you resize it up.
My use case doesn't solve if you have different images per view but only if you're using the same image in different sizes.

[joshribakoff]

I've come to understand device vs reference pixels (device's pixel ratio). Looks like the feature request can better be described as such:

"When the window is resized and the device's pixel ratio is changed, the retina src should be loaded in if applicable."

[dinbror]

Hey Josh.

The device pixel ratio will never change, also not on resize. If you add a second image to the data-src and your device has a retina ratio it'll load the retina image, http://dinbror.dk/blog/blazy/#Retina.

[joshribakoff]

Device pixel ratio does change when zooming (pinch zoom on mobile, control
plus/minus on desktop)
On May 25, 2014 11:15 AM, "dinbror" [email protected] wrote:

Hey Josh.

The device pixel ratio will never change, also not on resize. If you add a
second image to the data-src and your device has a retina ratio it'll load
the retina image, http://dinbror.dk/blog/blazy/#Retina.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/16#issuecomment-44141598
.

[dinbror]

Yes but not on resize. If the user has zoomed in from the beginning it might load the retina image but not if you start to zoom and the ratio changes. I think that's fine. Fits my load-only-one-image approach :)

[joshribakoff]

Not to split hairs but zooming does trigger a "resize" js event. My feature suggestion would be to load in higher rez images when the user zooms in. Most users aren't "zoomed in" to begin with - they open the page at 100% zoom level and then may zoom in from there. Our use case requires upgrading the image quality the moment the user zooms in. I'll be forking & implementing it at some point, I'd be happy to send a pull request if you're interested. Let me know if you're interested, closing for now.

I'd do the logic such that an image can be upgraded upon zooming in, but only once. Zooming back down won't reload the low quality images or any nonsense like that.

Take a tangible example. User has bad vision. User tries to read text on page but cannot, so the user zooms in. Text/images become larger, but the text within images should also enlarge. Currently the user would just be zooming in on a blurry image. With my suggestion, zooming in on images that contain text would become crisper text.

Another tangible example, a website that sells high resolution photos - If the user zooms in for whatever reason, this would help avoid the photos loosing resolution that could be otherwise displayed.

Also you could facilitate users extending your plugin by ensuring you have a method that could potentially retrigger loading. This way users can choose to bind blazy's loading method to either the "onload" event of their page, or both "onload" & "resize". Obviously different users want different behavior (my preferences vs yours) and this would be a nice inversion of control, to let users vary the behavior of their own implementation to match their specific needs. The downsize to this approach is you'd have to remove the logic that cleans up the "data" attributes, this way the loading is repeatable.

[tomByrer]

My feature suggestion would be to load in higher rez images when the user zooms in.

This indeed would be useful in many scenarios. & most would be useful outside blazy IMHO.
Why not have a separate, more universal script?

[joshribakoff]

Not sure what you mean by separate script. The only changes to blazy.js required would be to not delete the "data-src" attributes, and to expose a method that triggers the loading of images. I as a user can then bind a callback to resize events:

$(window).resize(function() {
  $('img').removeClass('loaded');
  blazy.prototype.forceReload(); // this would be like .revalidate() but would also clear any state like the images array
});

The browser's cache will then prevent re-downloading images if the "src" did not change. Also maybe you would have a conditional to prevent setting the "src" to the non-retina version, if it is currently set to "retina" version.

Basically, initializing the plugin should be a repeatable action. I find lots of these JS widgets modify your markup, which makes the logic not repeatable. This causes big problems when the user needs to bind to new events like resize, or pjax navigation. I predict as more websites start to use pjax/push state - a lot of plugins will need to have their architecture revisited such that running them is repeatable.