-
-
Save vasilisvg/1200270 to your computer and use it in GitHub Desktop.
| <!doctype html> | |
| <!-- | |
| WARNING! | |
| You probably shouldn't use this technique since images never show up | |
| if the script isn't loaded for one reason or another. Some reasons: | |
| - The content is viewed using a RSS reader | |
| - The content is viewed with a read-it-later service | |
| - The user has a flaky connection (hotel wifi, Dutch train, etc) | |
| --> | |
| <meta charset="UTF-8"> | |
| <title>Client side context aware responsive images</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| .image-container { | |
| width: 50%; | |
| position: relative; | |
| } | |
| .image-container img { | |
| display: block; | |
| max-width: 100%; | |
| } | |
| </style> | |
| <p>Here's <a href="http://nerd.vasilis.nl/code/responsive-images/noscript.html">a working example</a>.</p> | |
| <!-- place all sources and real widths of all images in their data-attribute... --> | |
| <div class="image-container" data-small="img/work-kills-small.jpg" data-medium="img/work-kills-medium.jpg" data-large="img/work-kills-large.jpg" data-small-width="350" data-medium-width="600" data-large-width="900" data-alt="work kills"> | |
| <!-- ...create a noscript fallback for browsers without javascript... --> | |
| <noscript> | |
| <img src="img/work-kills-small.jpg" alt="work kills"> | |
| </noscript> | |
| </div> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | |
| <script> | |
| // ...do things, and... | |
| $('.image-container').each(function() { | |
| var $this = $(this), | |
| contentWidth = $this.width(), | |
| theSource = | |
| contentWidth < $this.data('small-width') ? $this.data('small') : | |
| contentWidth < $this.data('medium-width') ? $this.data('medium') : | |
| $this.data('large'); | |
| $this.append('<img src="' + theSource + '" alt="' + $this.data('alt') + '">'); | |
| }); | |
| // ...tadaa! | |
| </script> |
I think tablet rotation is an edge case: most people either use their tablet in portrait mode or in landscape mode, people almost never rotate their tablet – a conclusion taken from a highly scientific twitter research I conducted among my followers a few months ago (-:
The only time people will rotate their tablet is when the content is not accessible and they think it will be when they rotate their device. Exactly that situation is what we are trying to prevent from happening with responsive design.
I would also suggest dropping the HTML in strings. HTML in JS is not that nice. Instead use jQuery's element creation syntax.
Instead of this line:
$this.append( '<img src="' + theSource + '" alt="' + $this.data('alt') + '">' );
I would suggest:
$( '<img>', { src: theSource, alt: $this.data('alt') } ).appendTo( $this );
Is there any real advantage (performance or another) in using your suggested syntax, hpoom?
I do not think this is any faster, so no real performance gains that I know of.
The main advantages I think are:
- Code is easy to read
- If you are working with an MVC framework like backbone.js then you can have a model for your element attributes and then just do model.toJSON and pass that in as the data obj to set the attributes.
Mainly it comes down to personal preference. When you have lots of attributes being set on an element I find string concatenation to be very messy to read.
Thanks for your explanations hpoom and mathiasbynens.
hehe, I think more of like tablet devices, where you could view the small side first and then rotate to the large one. In this example you would be stuck with the medium image on an iPad that loaded the page in portrait but is now in landscape. (And just by now I think there is some possibility to detect rotation, which could come in handy in those instances.)