image-swap.min.js

/////////////////////////////////////
//
// fn.ImageSwap
// -----------------------------
// Use HTML5 srcset attributes to show and hide images based on 
// your browser viewport plus device pixel density. 
// 
// image-swap.js uses the HTML5 srcset attribute, plus javascript 
// breakpoints to load and swap image sources. When using CSS 
// 'display:none;' to hide an image on a page, an http request is
// still sent to the browser menaing the image is still loaded and
// hurting performance. 
// -----------------------------
//
// Copyright 2012 Kaleb White
// http://cujo.jp/
//
// Licensed under the MIT license:
// http://www.opensource.org/licenses/mit-license.php
//
/////////////////////////////////////
!function(t,i){var e,r,a=t(i);r={imageContainer:".swap-img",createNewImage:!0,removeImage:!0,loadBestAvailable:!0,monitorPixelDensity:!1,interval:250,breakpoints:[480,768,1024]},e=function(i,e){var e;this.options=e?t.extend({},r,e):r,e=this.options,this.$swapImage=t("img"+e.imageContainer),this.$windowInterval=e.interval,this.$createEmptyImage=e.createNewImage,this.$removeImage=e.removeImage,this.$bestAvailable=e.loadBestAvailable,this.$breakpoints=e.breakpoints,this.$urlRegex="[-a-zA-Z0-9@:%_+.~#?&//=]*",this.$imageFragmentRegex="\\s*("+this.$urlRegex+")\\s*([0-9xwh.\\s]*)",this.INT_REGEXP=/^[0-9]+$/,this.$srcsetRegex="("+this.$imageFragmentRegex+",?)+",this.IMAGE_FRAGMENT_REGEXP=new RegExp(this.$imageFragmentRegex),this.setImage=!1,this.currBreakpoint=0,this.triggerDensityChange=e.monitorPixelDensity,this.init()},e.prototype={swapImage:function(i,e,r,a){{var s=i,n=e;r.w}this.currBreakpoint=a,t(s).is(":hidden")&&this.$createEmptyImage&&t(s).show(),t(s).addClass(a).attr("src",n),this.setImage=!1},imageDescriptions:function(t){for(var i=t.split(/\s/),e={},r=0;r<i.length;r++){var a=i[r];if(a.length>0){var s=a.charAt(a.length-1),n=a.substring(0,a.length-1),h=parseInt(n,10),o=parseFloat(n);n.match(this.INT_REGEXP)&&"w"===s?e[s]=h:n.match(this.INT_REGEXP)&&"h"==s?e[s]=h:isNaN(o)||"x"!=s?(this.error='Invalid srcset descriptor found in "'+a+'".',this.isValid=!1):e[s]=o}}return e},getImageData:function(e,r){var a=this,s=[],n=r,h=t(n).data("srcset").split(","),o=function(t){this.src=t.src,this.w=t.w||1/0,this.h=t.h||1/0,this.x=t.x||1};this.currBreakpoint=e;for(var A=0;A<h.length;A++){var c=i.devicePixelRatio,g=h[A].match(a.IMAGE_FRAGMENT_REGEXP),l=g[1],u=a.imageDescriptions(g[2]),p=new o({src:l,x:u.x,w:u.w});this.currBreakpoint<=p.w&&u.w===this.currBreakpoint&&s.push(p)}if(0===s.length)return void t(n).attr("src","data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==").hide();for(var m=0;m<s.length;m++){if(c>=1.5&&this.currBreakpoint<=s[m].w&&s[m].x>=c)return void a.swapImage(n,s[m].src,u,this.currBreakpoint);if(1.5>=c&&this.currBreakpoint<=s[m].w&&s[m].x<=c)return void a.swapImage(n,s[m].src,u,this.currBreakpoint);if(1===s.length){if(this.$bestAvailable)return void a.swapImage(n,s[m].src,u,this.currBreakpoint);this.$removeImage&&t(n).attr("src","data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==").hide()}}},checkPixelDensity:function(){var t=this,e=i.matchMedia("(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)").matches;t.currentMediaQuery=e?"highDensity":"lowDensity",t.currentMediaQuery!=t.lastMediaQuery&&(t.lastMediaQuery=this.currentMediaQuery,t.setupBreakpoints())},initializePixelDensityCheck:function(){setInterval(t.proxy(this.checkPixelDensity,this),this.$windowInterval)},setupBreakpoints:function(){var t=a.width(),i=(a.devicePixelRatio,this),e=!1,r=this.$swapImage;for(var s in this.$breakpoints.sort(function(t,i){return i-t})){if(!e&&t<=this.$breakpoints[this.$breakpoints.length-1]){for(var n in this.$breakpoints.sort(function(t,i){return i-t})){var s=this.$breakpoints[this.$breakpoints.length-1];r[n]&&i.getImageData(s,r[n])}e=!0}if(!e&&t>=this.$breakpoints[s]){for(var n in this.$breakpoints.sort(function(t,i){return i-t}))this.$breakpoints[s]&&r[n]&&i.getImageData(this.$breakpoints[s],r[n]);e=!0}}},throttle:function(t,i){var e,r,a;return function(){r=arguments,a=!0,e||!function(){a?(t.apply(r),a=!1,e=setTimeout(arguments.callee,i)):e=null}()}},init:function(){function i(){r.$swapImage.attr("src","data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==").hide(),e(),r.setupBreakpoints()}function e(){r.triggerDensityChange&&r.initializePixelDensityCheck(),a.bind("resize",r.throttle(t.proxy(r.setupBreakpoints,r),r.$windowInterval))}var r=this;t(i)}},t.fn.imageSwap=function(t){new e(this,t)}}(jQuery,window,document);