diff --git a/src/Test/Test/Controllers/HomeController.cs b/src/Test/Test/Controllers/HomeController.cs
index aa1999dd7..c08a32131 100644
--- a/src/Test/Test/Controllers/HomeController.cs
+++ b/src/Test/Test/Controllers/HomeController.cs
@@ -44,5 +44,10 @@ namespace Test.Controllers
return View(images);
}
+
+ public ActionResult Responsive()
+ {
+ return this.View();
+ }
}
}
diff --git a/src/Test/Test/Scripts/img.srcsect.pollyfill.js b/src/Test/Test/Scripts/img.srcsect.pollyfill.js
new file mode 100644
index 000000000..9eaa4e2ed
--- /dev/null
+++ b/src/Test/Test/Scripts/img.srcsect.pollyfill.js
@@ -0,0 +1,103 @@
+(function ($) {
+ // http: //www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-1.html#attr-img-srcset
+
+ // Regexes for matching queries.
+ var rSrc = /[^\s]+/,
+ rWidth = /(\d+)w/,
+ rRatio = /(\d+)x/;
+
+ // Detect retina display
+ // http: //www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html
+ var pixelRatio = (window.devicePixelRatio || 1);
+
+ // Cache the images as theres no point querying them twice.
+ var imageList = [];
+
+ // http://lodash.com/docs/#debounce
+ var debounce = function (func, wait, immediate) {
+ var args,
+ result,
+ thisArg,
+ timeoutId;
+
+ function delayed() {
+ timeoutId = null;
+ if (!immediate) {
+ func.apply(thisArg, args);
+ }
+ }
+
+ return function () {
+ var isImmediate = immediate && !timeoutId;
+ args = arguments;
+ thisArg = this;
+
+ clearTimeout(timeoutId);
+ timeoutId = setTimeout(delayed, wait);
+
+ if (isImmediate) {
+ result = func.apply(thisArg, args);
+ }
+ return result;
+ };
+ };
+
+ var getImgSrc = function (image) {
+ var imgSrc = null, imgWidth = 0, i,
+ imgSrcParts = image.attributes["srcset"].nodeValue.split(","),
+ len = imgSrcParts.length,
+ width = $(window).width();
+
+ for (i = 0; i < len; i += 1) {
+
+ // This is just a rough play on the algorithm.
+ var newImgSrc = imgSrcParts[i].match(rSrc)[0],
+ newImgWidth = rWidth.test(imgSrcParts[i]) ? parseInt(imgSrcParts[i].match(rWidth)[1], 10) : 1, // Use 1 for truthy
+ newPixelRatio = rRatio.test(imgSrcParts[i]) ? parseInt(imgSrcParts[i].match(rRatio)[1], 10) : 1;
+
+ if ((newImgWidth > imgWidth && width > newImgWidth && newPixelRatio === pixelRatio)) {
+
+ imgWidth = newImgWidth || imgWidth;
+ imgSrc = newImgSrc;
+ }
+ }
+
+ // Return null
+ return imgSrc;
+ };
+
+ $(window).resize(function () {
+
+ $.each(imageList, function () {
+ var self = this,
+ checkImage = function () {
+ var src = getImgSrc(self);
+
+ if (src) {
+ self.src = src;
+ }
+
+ },
+ lazyCheck = debounce(checkImage, 100);
+
+ // Run debounced
+ lazyCheck();
+
+ });
+
+ });
+
+ $(window).load(function () {
+ $("img[srcset]").each(function () {
+
+ var src = getImgSrc(this);
+
+ if (src) {
+ this.src = src;
+ }
+
+ imageList.push(this);
+ });
+ });
+
+} (jQuery));
\ No newline at end of file
diff --git a/src/Test/Test/Test.csproj b/src/Test/Test/Test.csproj
index c0b62bba5..45cf111ad 100644
--- a/src/Test/Test/Test.csproj
+++ b/src/Test/Test/Test.csproj
@@ -105,11 +105,13 @@
-
+
+
+
-
-
-
+
+
+
Designer
@@ -130,7 +132,6 @@
-
@@ -145,6 +146,9 @@
ImageProcessor
+
+
+