Repository: joshje/Responsive-Enhance Branch: master Commit: 907f2592280a Files: 3 Total size: 3.7 KB Directory structure: gitextract_5zblforw/ ├── index.html ├── readme.md └── responsive-enhance.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: index.html ================================================ Responsive Enhance

Responsive Enhance

Depending on the size of your viewport, you may see a 400px by 300px wide image, or a 800px by 600px image. Try refreshing the page with a small or wide browser window. The standard image is always downloaded, full images are then downloaded as needed.

Responsive Image

<img id="demo1" src="http://dummyimage.com/400x300" alt="Responsive Image" data-fullsrc="http://dummyimage.com/800x600">
<script>responsiveEnhance(document.getElementById('demo1'), 400);</script>

Here's a photo of some lovely star biscuits that @qwertykate bought us. Image courtesy of adactio.

Responsive Image

<img id="demo2" src="http://farm8.staticflickr.com/7022/6806617685_3be0d007c3_m.jpg" alt="Responsive Image" data-fullsrc="http://farm8.staticflickr.com/7022/6806617685_b793771008_o.jpg">
<script>responsiveEnhance(document.getElementById('demo2'), 240);</script>

================================================ FILE: readme.md ================================================ Responsive Enhance ================== This script will check whether an image is larger than a specified width and load a full resolution image if necessary. Responsive Image This will replace the image with the image defined in the `data-fullsrc` when the image is wider than 400 pixels. ================================================ FILE: responsive-enhance.js ================================================ var addEvent=function(){return document.addEventListener?function(a,c,d){if(a&&a.nodeName||a===window)a.addEventListener(c,d,!1);else if(a&&a.length)for(var b=0;b width) { var fullimg = new Image(); addEvent(fullimg, 'load', function(e) { img.className += ' large'; img.src = this.src; }); fullimg.src = img.getAttribute('data-fullsrc'); } } if (monitor != false) { addEvent(window, 'resize', function(e) { responsiveEnhance(img, width, false); }); addEvent(img, 'load', function(e) { responsiveEnhance(img, width, false); }); } };