diff --git a/README.md b/README.md index f8e93a7..6acb3f9 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,6 @@ Just load image by sizes you really need, save lots of bandwidth and make the wo This plugin doesn't need any matchMedia polyfills or shims for unknown html elements. -Minified size is 2.58KB | gzipped: 1.66KB ## Usage @@ -76,6 +75,7 @@ Setting this parameter is recommended because it optimizes the target size for t This is the resize event used to detect the resize of the viewport. You can set any event that can be used inside jQuery's `.on()` function. +Set `resizeEvent` to empty string to disable image calculation on resize. It defaults to the `resize` event, which is not recommended because of the high amount of fired events. @@ -99,6 +99,15 @@ If you want to show only Retina images set this value to `2` #### `attributes` (default: `['title', 'alt', 'class', 'width', 'height']`) These attributes are set to the generated responsive image tag. See Attributes-Section below for detailed information. + +#### `preload` (default: `false`) + +Preload images before loading them into the DOM. Default is immediate loading of images. + +#### `autoDpr` (default: `false`) + +Automatically include dpr on best fit width calculation. +If enabled this adds retina support by default without the need for data-min-dpr attributes. #### `onGetWidth` (default: `null`) diff --git a/build/jquery.responsiveImage.map b/build/jquery.responsiveImage.map index c7a16df..482d10c 100644 --- a/build/jquery.responsiveImage.map +++ b/build/jquery.responsiveImage.map @@ -1 +1 @@ -{"version":3,"sources":["../src/jquery.responsiveImage.js"],"names":["$","window","document","undefined","Plugin","element","options","this","$element","extend","defaults","sources","dpr","getDpr","attributeCount","attributes","length","init","pluginName","source","container","minWidthDefault","maxWidthDefault","Number","MAX_VALUE","minDprDefault","resizeEvent","onGetWidth","prototype","loadSources","containerSelector","attr","$container","parents","loadResponsiveImage","initResizeEvent","self","find","each","$source","data","src","minWidth","maxWidth","minDpr","i","attribute","push","sort","a","b","newSource","targetWidth","getWidth","sourceCount","$currentSource","html","createImageWithAttributes","trigger","isFunction","call","width","innerWidth","documentElement","clientWidth","body","screen","systemXDPI","logicalXDPI","devicePixelRatio","image","createElement","setAttribute","on","proxy","fn","jQuery"],"mappings":"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","file":"jquery.responsiveImage.min.js"} \ No newline at end of file +{"version":3,"sources":["../src/jquery.responsiveImage.js"],"names":["$","window","document","undefined","Plugin","element","options","self","this","$element","extend","defaults","sources","dpr","getDpr","attributeCount","attributes","length","init","pluginName","source","container","minWidthDefault","maxWidthDefault","Number","MAX_VALUE","minDprDefault","resizeEvent","preload","autoDpr","onGetWidth","prototype","loadSources","containerSelector","attr","$container","parents","loadResponsiveImage","initResizeEvent","find","each","$source","data","src","minWidth","maxWidth","minDpr","i","attribute","push","sort","a","b","newSource","targetWidth","getWidth","sourceCount","$currentSource","$image","createImageWithAttributes","setNewSource","html","trigger","width","isFunction","call","innerWidth","documentElement","clientWidth","body","screen","systemXDPI","logicalXDPI","devicePixelRatio","one","get","complete","on","proxy","fn","jQuery"],"mappings":"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","file":"jquery.responsiveImage.min.js"} \ No newline at end of file diff --git a/build/jquery.responsiveImage.min.js b/build/jquery.responsiveImage.min.js index da8e6f8..cc5eec6 100644 --- a/build/jquery.responsiveImage.min.js +++ b/build/jquery.responsiveImage.min.js @@ -1,5 +1,5 @@ -/*! jquery-responsive-image - v1.2.1 - 2015-12-10 -* Copyright (c) 2015 Jan Rembold ; License: MIT */ +/*! jquery-responsive-image - v1.3.0 - 2016-01-28 +* Copyright (c) 2016 Jan Rembold ; License: MIT */ -!function(a,b,c,d){"use strict";function e(b,c){this.$element=a(b),this.options=a.extend({},g,c),this.sources=[],this.dpr=this.getDpr(),this.attributeCount=this.options.attributes.length,this.init()}var f="responsiveImage",g={source:"> span",container:null,minWidthDefault:0,maxWidthDefault:Number.MAX_VALUE,minDprDefault:1,attributes:["title","alt","class","width","height"],resizeEvent:"resize",onGetWidth:null};a.extend(e.prototype,{init:function(){if(this.sources=this.loadSources(),0!==this.sources.length){var a=this.$element.attr("data-container")||this.options.container;a&&(this.$container=this.$element.parents(a)),this.loadResponsiveImage(),this.initResizeEvent()}},loadSources:function(){var b=this,c=[];return this.$element.find(this.options.source).each(function(){var d=a(this);if(d.data("src")){for(var e={src:d.data("src"),minWidth:d.data("min-width")||b.options.minWidthDefault,maxWidth:d.data("max-width")||b.options.maxWidthDefault,minDpr:d.data("min-dpr")||b.options.minDprDefault},f=0;fd;d++)if(this.sources[d].minWidth<=b&&this.sources[d].maxWidth>b&&this.sources[d].minDpr<=this.dpr){a=this.sources[d];break}a!==this.$currentSource&&(this.$currentSource=a,this.$element.html(this.createImageWithAttributes(a)),this.$element.trigger("new.source."+f))},getWidth:function(){return a.isFunction(this.options.onGetWidth)?this.options.onGetWidth.call(this):this.$container?this.$container.width():b.innerWidth||c.documentElement.clientWidth||c.body.clientWidth},getDpr:function(){return b.screen.systemXDPI!==d&&b.screen.logicalXDPI!==d&&b.screen.systemXDPI>b.screen.logicalXDPI?b.screen.systemXDPI/b.screen.logicalXDPI:b.devicePixelRatio!==d?b.devicePixelRatio:1},createImageWithAttributes:function(b){var d=this,e=c.createElement("img");e.setAttribute("src",b.src);for(var f=0;f span",container:null,minWidthDefault:0,maxWidthDefault:Number.MAX_VALUE,minDprDefault:1,attributes:["title","alt","class","width","height"],resizeEvent:"resize",preload:!1,autoDpr:!1,onGetWidth:null};a.extend(e.prototype,{init:function(){var a=this;if(a.sources=a.loadSources(),0!==a.sources.length){var b=a.$element.attr("data-container")||a.options.container;b&&(a.$container=a.$element.parents(b)),a.loadResponsiveImage(),a.initResizeEvent()}},loadSources:function(){var b=this,c=[];return b.$element.find(b.options.source).each(function(){var d=a(this);if(d.data("src")){for(var e={src:d.data("src"),minWidth:d.data("min-width")||b.options.minWidthDefault,maxWidth:d.data("max-width")||b.options.maxWidthDefault,minDpr:d.data("min-dpr")||b.options.minDprDefault},f=0;fe;e++)if(b.sources[e].minWidth<=c&&b.sources[e].maxWidth>c&&b.sources[e].minDpr<=b.dpr){a=b.sources[e];break}if(a!==b.$currentSource){b.$currentSource=a;var f=b.createImageWithAttributes(a);b.options.preload||b.setNewSource(f)}},setNewSource:function(a){var b=this;b.$element.html(a),b.$element.trigger("new.source."+f)},getWidth:function(){var d,e=this;return d=a.isFunction(e.options.onGetWidth)?e.options.onGetWidth.call(this):e.$container?e.$container.width():b.innerWidth||c.documentElement.clientWidth||c.body.clientWidth,e.options.autoDpr&&(d*=e.dpr),d},getDpr:function(){return b.screen.systemXDPI!==d&&b.screen.logicalXDPI!==d&&b.screen.systemXDPI>b.screen.logicalXDPI?b.screen.systemXDPI/b.screen.logicalXDPI:b.devicePixelRatio!==d?b.devicePixelRatio:1},createImageWithAttributes:function(b){for(var c=this,d=a(""),e=0;eUnsorted sources (same as retina demo) $(document).ready(function () { // init responsive images $('.picture').responsiveImage({ - resizeEvent: 'debouncedwidth' + resizeEvent: 'debouncedwidth', + preload: true }); // load helpers diff --git a/package.json b/package.json index 46c1221..669e853 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jquery-responsive-image", - "version": "1.2.1", + "version": "1.3.0", "description": "A jQuery responsive image plugin with viewport or container based width matching support", "author": "Jan Rembold ", "main": "build/jquery.responsiveImage.min.js", diff --git a/src/jquery.responsiveImage.js b/src/jquery.responsiveImage.js index 59965fe..b0145c5 100644 --- a/src/jquery.responsiveImage.js +++ b/src/jquery.responsiveImage.js @@ -16,43 +16,47 @@ attributes: ['title', 'alt', 'class', 'width', 'height'], resizeEvent: 'resize', + preload: false, + autoDpr: false, onGetWidth: null }; // The actual plugin constructor function Plugin ( element, options ) { - this.$element = $(element); - this.options = $.extend( {}, defaults, options ); + var self = this; + self.$element = $(element); + self.options = $.extend( {}, defaults, options ); - this.sources = []; - this.dpr = this.getDpr(); - this.attributeCount = this.options.attributes.length; + self.sources = []; + self.dpr = self.getDpr(); + self.attributeCount = self.options.attributes.length; - this.init(); + self.init(); } // Avoid Plugin.prototype conflicts $.extend(Plugin.prototype, { init: function () { + var self = this; // load sources - this.sources = this.loadSources(); - if(this.sources.length === 0) { + self.sources = self.loadSources(); + if(self.sources.length === 0) { return; } // check container or viewport support - data-container overrides default setting - var containerSelector = this.$element.attr('data-container') || this.options.container; + var containerSelector = self.$element.attr('data-container') || self.options.container; if(containerSelector) { - this.$container = this.$element.parents(containerSelector); + self.$container = self.$element.parents(containerSelector); } // load responsive image - this.loadResponsiveImage(); + self.loadResponsiveImage(); // init resize event with jquery-debouncedwidth support: https://github.com/janrembold/jquery-debouncedwidth - this.initResizeEvent(); + self.initResizeEvent(); }, loadSources: function(){ @@ -60,7 +64,7 @@ var sources = []; // prepare all necessary image data - this.$element.find(this.options.source).each(function(){ + self.$element.find(self.options.source).each(function(){ var $source = $(this); // only use images with source @@ -97,44 +101,74 @@ }, loadResponsiveImage: function () { + var self = this; var newSource; - var targetWidth = this.getWidth(); - var sourceCount = this.sources.length; + var targetWidth = self.getWidth(); + var sourceCount = self.sources.length; // search for best image source for (var i=0; i targetWidth && - this.sources[i].minDpr <= this.dpr + if( self.sources[i].minWidth <= targetWidth && + self.sources[i].maxWidth > targetWidth && + self.sources[i].minDpr <= self.dpr ) { - newSource = this.sources[i]; + newSource = self.sources[i]; break; } } // check if image is already loaded - if(newSource === this.$currentSource) { + if(newSource === self.$currentSource) { return; } // set new source - this.$currentSource = newSource; + self.$currentSource = newSource; - // append responsive image to target element - this.$element.html( this.createImageWithAttributes(newSource) ); + // create new image + var $image = self.createImageWithAttributes(newSource); + + // append responsive image immediately to target element + if( !self.options.preload ) { + self.setNewSource( $image ); + } + + }, + + setNewSource: function( $image ) { + var self = this; + + // set new image to html + self.$element.html( $image ); // trigger new source event - this.$element.trigger('new.source.'+pluginName); + self.$element.trigger('new.source.'+pluginName); }, getWidth: function(){ - if($.isFunction(this.options.onGetWidth)) { - return this.options.onGetWidth.call(this); - } else if(this.$container) { - return this.$container.width(); + var self = this; + var width; + + if($.isFunction(self.options.onGetWidth)) { + + // get width from custom function + width = self.options.onGetWidth.call(this); + } else if(self.$container) { + + // get width from container + width = self.$container.width(); + } else { + + // get window width + width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; + } + + // multiply width with dpr + if( self.options.autoDpr ) { + width *= self.dpr; } - return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; + return width; }, getDpr: function(){ @@ -152,25 +186,42 @@ createImageWithAttributes: function(source){ // create default image var self = this; - var image = document.createElement('img'); - image.setAttribute('src', source.src); + var $image = $(''); // append all given attributes - for(var i=0; i