[ { "path": "index.html", "content": "\n\n\n\n\nResponsive Enhance\n\n\n\n
\n

Responsive Enhance

\n

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.

\n

\"Responsive

\n

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

\n

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

\n

\"Responsive

\n

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

\n
\n\n\n\n" }, { "path": "readme.md", "content": "Responsive Enhance\n==================\n\nThis script will check whether an image is larger than a specified width and load a full resolution image if necessary.\n\n \"Responsive\n \n \nThis will replace the image with the image defined in the `data-fullsrc` when the image is wider than 400 pixels." }, { "path": "responsive-enhance.js", "content": "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) {\n var fullimg = new Image();\n addEvent(fullimg, 'load', function(e) {\n img.className += ' large';\n img.src = this.src;\n });\n fullimg.src = img.getAttribute('data-fullsrc');\n }\n }\n if (monitor != false) {\n addEvent(window, 'resize', function(e) {\n responsiveEnhance(img, width, false);\n });\n addEvent(img, 'load', function(e) {\n responsiveEnhance(img, width, false);\n });\n }\n};" } ]