For responsive images I have come up with a first draft of how I would like to swap image sources depending on media query. This works fine and with the added debouncing function from Paul Irish the window resize event is also taken care of.
Now what I am wondering is if I could write this even more concise and most of all if there are major flaws in my thinking that could lead to images not loading or the like.
I am also wondering whether to write
var $responsiveImage = $('.responsiveImage');
or
var responsiveImage = $('.responsiveImage');
as I am not entirely sure what the difference between the two is.
With the first case I am making an object that contains all the image elements and I assume with the second case I am generating a variable that holds all the objects that are the image elements. Is this correct?
Here is the fiddle and following is the jQuery code.
// on DOM ready
$(document).ready(function() {
function responsiveImages () {
// store all responsive image elements in jQuery object
var $responsiveImage = $('.responsiveImage');
// go over each responsive image element
$responsiveImage.each(function () {
// check how many responsiveImg objects there are
console.log( $(this).length );
// declare variable for each of the images found
var image = $(this);
// declare variables for small, medium and large images and
// store information about the image with .data() method
var smallImage = image.data('smallImage');
var mediumImage = image.data('mediumImage');
var largeImage = image.data('largeImage');
// function to change the image source
// there are two arguments for this function, the current image and the replacement image
function replaceImage (currentImage, replacementImage) {
// get the current image 'src' attribute and change it to the replacement image
currentImage.attr('src', replacementImage);
} // function replaceImage end
// from 0 - 400 px media query serve small images
// from 401 - 700 px media query serve medium images
// from 701 - 1100 px media query serve large images
enquire.register("screen and (min-width:0px) and (max-width:400px)", {
deferSetup : true,
setup : function() {
// load content via AJAX
},
match : function() {
// if the media query matches replace the image with the small image
replaceImage(image, smallImage);
},
unmatch : function() {
// if the media query unmatches remove the image source
replaceImage(image, '');
}
}); // enquire "screen and (min-width:0px) and (max-width:300px)" end
enquire.register("screen and (min-width:401px) and (max-width:700px)", {
deferSetup : true,
setup : function() {
// load content via AJAX
},
match : function() {
// if the media query matches replace the image with the medium image
replaceImage(image, mediumImage);
},
unmatch : function() {
// if the media query unmatches remove the image source
replaceImage(image, '');
}
}); // enquire "screen and (min-width:301px) and (max-width:600px)" end
enquire.register("screen and (min-width:701px) and (max-width:1100px)", {
deferSetup : true,
setup : function() {
// load content via AJAX
},
match : function() {
// if the media query matches replace the image with the large image
replaceImage(image, largeImage);
},
unmatch : function() {
// if the media query unmatches remove the image source
replaceImage(image, '');
}
}); // enquire "screen and (min-width:601px)" end
}) // $responsiveImage.each function end
}; // function responsiveImages end
// call function responsiveImages
responsiveImages();
////////////////////////////////////////////////////////////////////////////////////////////
// Smart Resize - Paul Irish
//http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 50); // set this higher for production, up to 50 maximum
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize'); // Smart Resize end
////////////////////////////////////////////////////////////////////////////////////////////
// call the function responsiveImages on resize of the browser window
// for this the function smartresize from Paul Irish is ideal
$(window).smartresize(function(){
responsiveImages();
console.log('function responsiveImages executed');
});
}); // DOM ready end
