Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Breakpoint switch detection: revalidates images when switch occurs #50

Closed
wants to merge 3 commits into from

Conversation

andr3
Copy link

@andr3 andr3 commented Mar 25, 2015

In this PR the following major changes are introduced:

  1. The data-* attributes are no longer removed. Was there any strong reason to remove them? I have an idea to still be able achieve the major goal even if the attributes are removed.

  2. On each validate() it checks if the resize jumped across a breakpoint. If no breakpoints are defined, the additional code doesn't even run.

Let me hear your feedback and I can fine-tune this, fix and push -f so that the merge is as clean as possible.

Cheers @dinbror!

@andr3
Copy link
Author

andr3 commented Apr 15, 2015

@dinbror friendly ping? :)

@zipper
Copy link

zipper commented Oct 30, 2015

Although your getViewportWidth method returns real viewport width (not including the scrollbar), when using CSS media queries, the width is calculated with scrollbar included. This may result in some discrepancies since your layout might change earlier, than the lazyload changes the image. I would suggest using something like this to solve the problem http://stackoverflow.com/a/21883401, but it probably depends on usage - if you need your images always 100% of your viewport, your version would work just fine.

Edit: After bit of a thinking, I have these two scenarios, when your function may cause headache:

  1. You have an image 100% of the viewport wide, but since 640px width, you want your aspect ratio different. Your CSS layout changes, but the the image doesn't until another ~16px, so you end up with some empty space either on sides of the image or above/below of it.
  2. You have lets say tablet version of layout, where the image is max 300px in width. In css you change your layout at using @media (min-width: 900px) breakpoint and the image may use up to 900px, so you need 900px wide image. Because of CSS works with width scrollbar included, layout will change in approximately 884px, the JS won't reflect that change until you resize a screen a little bit more and you will have a lot upscaled image.

Hopefully, you understand, what I mean :) This is mostly Windows/Linux issue, since on Mac the scrollbars are hidden by default afaik.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants