Blood and sweat

gistfile1.js

;(function ($, window, document, undefined) {
    'use strict';
    /*
        ImageBreakpoint by dubizzle
        A Responsive design candy that allow you to load only 
        the images you need depending on one of these breakpoints mobile/tablet/desktop
        we will show mobile dedicated image for the non-js fallback
        for ie8 :(Media queries won't really work unless you simulate them using respond.js)

        HTML: 
            <img src="1px.gif"
             data-breakpoint-img="true"
             data-mobile-src="mobile-version.jpg"
             data-tablet-src="tablet-version.jpg"
             data-desktop-src="desktop-version.jpg"/>

        USAGE: 
        $(document).imageBreakpoint(); or 
        $(document).imageBreakpoint({[data-selector='true']});
        You can also select the parent container of the page instead of $(document)

        Dependencies : 
            init.js
        Adding 1px base64 gif image is better that having http request 
        if you find anything wrong with that, you're welcome to update us 
    */

    var pluginName = "imageBreakpoint",
        defaults = {
            // this will be used as a default data selector
            // if data-breakpoint-img then the plugin will affect
            // automatically this image 
            dataBreakpoint: "[data-breakpoint-img='true']"
        };

    // Plugin constructor
    function Plugin(element, options) {
        this.element = element;

        this.options = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }
    // The main action goes here
    Plugin.prototype = {
        init: function() {
            // Initiation logic goes here 
            // You can access directly the DOM from this function
            // You can access current scope with this.element and this.options

            var self = this; 

            self.changeSrc();
            self.events();
        },
        changeSrc: function() {
            var images_collection = $(this.options.dataBreakpoint), // like the name says
                count = $(images_collection).length, // number of images to process
                viewport = this.whatBreakpoint(), // current viewport
                i = 1; // intial counter

            // This function change the 1px image source by the realsource image
            // We need to make sure .each is not exceeding the image count 
            // so we will break the .each when we reach the count of elements
            // the raison why we use a counter is because .each have one extra loop
            images_collection.each(function() {
                // self will be the reference to the images_collection
                var self = $(this);
                // very handy secure against max number of executions
                if (i >= count.length) {
                    // exit from .each loop
                    return false;
                }
                // change the source to the real source
                self.attr("src", self.data(viewport + "-src"));
                i++;
             });
        },
        whatBreakpoint: function() {
            // you need to know what breakpoint you have
            // there is a dependency from Init.WhatViewport() from init.js
            var viewport = window.Init.whatViewPort();
            return viewport;
        },
        events: function() {
            var self = this;
            // Keep running the plugin on window resizing
            $(window).resize(function(){
                self.changeSrc();
            });
        }
    };

    // Prevent multiple instanciations 
    // keeping the plugin fast in execution
    $.fn[pluginName] = function(options) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
        });
    };

    // Function running on domready
    $(function(){
        // call to the plugin
        $(document).imageBreakpoint();
    });

})(jQuery, window, document);