From 3fed054496890d16530fbf8276f36effccf8a770 Mon Sep 17 00:00:00 2001 From: scottjehl Date: Thu, 16 Dec 2010 16:48:38 -0500 Subject: [PATCH] Update: When referencing responsive images, add a ".r" prefix to the file extension. This will ensure that ONLY responsive images are redirected to the temp gif. All other images (and other requests) will resolve to their proper destination. Fixes #2 --- .htaccess | 8 +++++--- README.md | 8 +++++--- demo.html | 4 +++- rwd-images/rwd-images.js | 3 --- 4 files changed, 13 insertions(+), 10 deletions(-) diff --git a/.htaccess b/.htaccess index 19f4028..ff5b0ab 100644 --- a/.htaccess +++ b/.htaccess @@ -5,7 +5,9 @@ # //Start Responsive Images RewriteEngine On # direct image requests to temp -RewriteRule ^rwd-image-trap/.*\.(jpe?g|png|gif)$ rwd-images/rwd.gif -#ignore trap for non-image requests, rewrite URL without trap segment -RewriteRule ^rwd-image-trap/(.*\.(?!jpg|jpeg|png|gif)(.+)) $1 +RewriteRule .*rwd-image-trap/.*\.r\.(jpe?g|png|gif)$ rwd-images/rwd.gif [L] +# ignore trap for non-image requests, rewrite URL without trap segment +RewriteRule (.*)rwd-image-trap/(.*)$ $1$2 +# remove .r from all requests +RewriteRule (.*)\.r(\.(jpe?g|png|gif))$ $1$2 # //End Responsive Images \ No newline at end of file diff --git a/README.md b/README.md index f589072..9d6cc33 100644 --- a/README.md +++ b/README.md @@ -14,13 +14,15 @@ The goal of this technique is to deliver optimized, contextual image sizes in [r -3. Add data-fullsrc attributes to any img elements that offer a larger desktop-friendly size: +3. Add a data-fullsrc attribute to any img elements that offer a larger desktop-friendly size AND ALSO add an ".r" prefix to those images' file extensions in the src attribute ("small.jpg" becomes "small.r.jpg"). - <img src="small.jpg" data-fullsrc="large.jpg"> + <img src="small.r.jpg" data-fullsrc="large.jpg"> + +Note: the actual image file does not need the ".r" in its filename. The .htaccess will remove this when requesting the actual file. #### How's it work? -As soon as rwd-images.js loads, it inserts a BASE element into the head of your page, directing all subsequent image, script, and stylesheet requests through a fictitious directory called "/rwd-image-trap/". As these requests reach the server, the .htaccess file determines whether the request is an image or not. It redirects image requests to rwd.gif (a transparent 1px gif image), while all non-image requests go to their proper destination through a URL rewrite that ignores the "/rwd-image-trap/" segment. When the HTML finishes loading, the script removes the BASE element from the DOM (resetting the base URL) and sets the image sources to either their small or large size (when specified), depending on whether the screen resolution is greater than 480px. +As soon as rwd-images.js loads, it inserts a BASE element into the head of your page, directing all subsequent image, script, and stylesheet requests through a fictitious directory called "/rwd-image-trap/". As these requests reach the server, the .htaccess file determines whether the request is a responsive image or not (does it have a ".r.png", ".r.jpg" extension?). It redirects responsive image requests to rwd.gif (a transparent 1px gif image), while all non-responsive-image requests go to their proper destination through a URL rewrite that ignores the "/rwd-image-trap/" segment. When the HTML finishes loading, the script removes the BASE element from the DOM (resetting the base URL) and sets the image sources to either their small or large size (when specified), depending on whether the screen resolution is greater than 480px. ### Supported Browsers Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), Opera diff --git a/demo.html b/demo.html index cad872a..9cb4d76 100644 --- a/demo.html +++ b/demo.html @@ -27,7 +27,9 @@

Responsive Images Test Page

In supported browsers, the following image will load either small or large version depending on screen resolution, making a single 1kb request before requesting the appropriate size.

- + + + diff --git a/rwd-images/rwd-images.js b/rwd-images/rwd-images.js index 62fb085..61741a1 100644 --- a/rwd-images/rwd-images.js +++ b/rwd-images/rwd-images.js @@ -55,9 +55,6 @@ if(fullsrc){ img.src = fullsrc; } - else{ - img.src = img.src; - } } }, //base tag support test (returns base tag for use if support test passes)