├── index.html ├── readme.md └── responsive-enhance.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 24 | Responsive Enhance 25 | 26 | 27 | 28 |
29 |

Responsive Enhance

30 |

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.

31 |

Responsive Image

32 | 

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

34 |

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

35 |

Responsive Image

36 | 

<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">
37 | <script>responsiveEnhance(document.getElementById('demo2'), 240);</script>

38 |
39 | 40 | 41 | 45 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | Responsive Enhance 2 | ================== 3 | 4 | This script will check whether an image is larger than a specified width and load a full resolution image if necessary. 5 | 6 | Responsive Image 7 | 8 | 9 | This will replace the image with the image defined in the `data-fullsrc` when the image is wider than 400 pixels. -------------------------------------------------------------------------------- /responsive-enhance.js: -------------------------------------------------------------------------------- 1 | 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) { 10 | var fullimg = new Image(); 11 | addEvent(fullimg, 'load', function(e) { 12 | img.className += ' large'; 13 | img.src = this.src; 14 | }); 15 | fullimg.src = img.getAttribute('data-fullsrc'); 16 | } 17 | } 18 | if (monitor != false) { 19 | addEvent(window, 'resize', function(e) { 20 | responsiveEnhance(img, width, false); 21 | }); 22 | addEvent(img, 'load', function(e) { 23 | responsiveEnhance(img, width, false); 24 | }); 25 | } 26 | }; --------------------------------------------------------------------------------