Responsive Images Script

using the proposed picture element this script will load the appropriate version of an image.

by John Allan

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<!-- note that the here-test-large srcset has only one URL
this is because of this article (http://blog.netvlies.nl/design-interactie/retina-revolution/) which talks about creating a 2x image at jpg 30 quality instead of a 1x image at say 65.  they render the same and its lighter.  not sure if this is the absolute best approach but the js doesn't really care.  All it means is your getting the same image whether your screen is high DPI or not. -->

<div id="banner">
<picture alt="golf course water hazard">
    <source media="(min-device-width: 768px)" srcset="http://www.johnallan.ca/jsfiddle/NE5Tr/hero-test-large-2.jpg 1x, http://www.johnallan.ca/jsfiddle/NE5Tr/hero-test-large-2.jpg 2x">
    <source srcset="http://www.johnallan.ca/jsfiddle/NE5Tr/hero-test-small-1.jpg 1x, http://www.johnallan.ca/jsfiddle/NE5Tr/hero-test-small-2.jpg 2x">
    <img src="http://www.johnallan.ca/jsfiddle/NE5Tr/hero-test-small-1.jpg" alt="golf course water hazard">
</picture>
</div>

CSS

#banner img{
    max-width:100%;       
}

JavaScript

var hcfResponsiveImages = (function () {

    var values,
        elements,
        rewriteUrl = function (index, el) {
            var $el, i, srcset, srcsArray, srcsArrayIndex, imgRes, resIndex, orgSrc, newSrc, $img;
            
            $el = $(el);
            imgRes = (values.isRetina) ? ' 2x' : ' 1x';
            srcset = $el.children('source[media="' + values.breakpoints[values.lastTrueBreakpointIndex] + '"]').attr('srcset');
            
            if (!srcset) {
                srcset = $el.children('source:not([media])').attr('srcset');
            }

            if (srcset) {
                srcsArray = srcset.split(',');
                for (i = 0; i < srcsArray.length; i++) {
                    resIndex = srcsArray[i].indexOf(imgRes);
                    if (resIndex !== -1) {
                        srcsArrayIndex = i;
                        break;
                    }
                }

                // alert(srcsArray[srcsArrayIndex].substring(0, resIndex));
                $img = $el.children('img');
                orgSrc = $img.attr('src');
                newSrc = srcsArray[srcsArrayIndex].substring(0, resIndex);
                
                if (orgSrc !== newSrc) {
                    $img.attr('src', newSrc);
                }
            }
        },
        init = function () {
            var i, bool;

            elements = {
                'body':     $('body'),
                'imgs':     $('picture')
            };

            values = {
                'isRetina':    Modernizr.mq('(min-resolution: 144dpi)') || Modernizr.mq('(-webkit-min-device-pixel-ratio: 1.5)') || false,
                'breakpoints': ['(min-device-width: 768px)'],
                'breakpointTests': [],
                'lastTrueBreakpointIndex': null
            };

            for (i = 0; i < values.breakpoints.length; i++) {
                bool = Modernizr.mq(values.breakpoints[i]);
                values.breakpointTests[i] = bool;
              ...