removed the data-attr based approach. Now using ?full=largeimagesrcpa…

…th. No ".r" flag is needed anymore either, no gif is used. Thanks Andy Hume for the idea!

.htaccess

@@ -5,9 +5,8 @@
 # //Start Responsive Images 
 RewriteEngine On
 # direct image requests to temp
-RewriteRule .*rwd-router/.*\.r\.(jpe?g|png|gif)$ rwd-images/rwd.gif [L]
+RewriteCond %{QUERY_STRING} full=(.*)&?
+RewriteRule (.*)rwd-router/.*\.(jpe?g|png|gif) $1%1 [L]
 # ignore trap for non-image requests, rewrite URL without trap segment
 RewriteRule (.*)rwd-router/(.*)$ $1$2
-# remove .r from all requests
-RewriteRule (.*)\.r(\.(jpe?g|png|gif))$ $1$2
 # //End Responsive Images

demo.html

@@ -28,7 +28,7 @@ <h1>Responsive Images Test Page</h1>
 	<p>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.</p>
 
 	<!-- ADD THE "r." prefix to your image extension for any responsive images -->
-	<img src="sample-content/running-sml.r.jpg" data-fullsrc="sample-content/running-lrg.jpg">
+	<img src="sample-content/running-sml.jpg?full=sample-content/running-lrg.jpg" />
 
 	<p id="cred"><strong>Photo credit (CC):</strong> Cia de Foto <a href="http://www.flickr.com/photos/ciadefoto/3192757134/in/pool-809956@N25/">Flickr Creative Commons</a></p>
 

rwd-images/rwd-images.js

@@ -30,23 +30,8 @@
 		//add HTML class
 		doc.documentElement.className += " " + htmlClass;
 
-		//find and replace img elements
-		var findrepsrc = function(){
-			var imgs = doc.getElementsByTagName( "img" ),
-				il = imgs.length;
-
-			for(var i = 0; i < il; i++){
-				var img = imgs[i],
-					fullsrc = img.getAttribute("data-fullsrc");
-
-				if(fullsrc){
-					img.src = fullsrc;
-				}
-			}
-		},
-		//base tag support test (returns base tag for use if support test passes)
-			//originally used in the jQuery Mobile framework, converted to plain JS in the hasjs framework, modified for use here	
-		base = (function(){
+		//base tag support test (returns base tag for use if support test passes)	
+		var base = (function(){
 			var backup,
 				baseAdded = false,
 				a = doc.createElement("a"),
@@ -74,37 +59,7 @@
             	base.href = dirPath +  "rwd-router/";
             }
 	      return base;
-	    })(),
+	    })();
 
-	    //flag for whether loop has run already
-	    complete = false,
-
-	    //remove base if present, find/rep image srcs if wide enough (maybe make this happen at domready?)
-	    readyCallback = function(){
-	    	if( complete ){ return; }
-	    	complete = true;
-	    	//making this async seems to ensure images don't double request?
-	    	setTimeout(function(){
-		    	if( base ) {
-					//set base back to something real before removing
-					base.href = dirPath;
-					head.removeChild(base);
-				}
-				findrepsrc();
-			},0);
-	    };
-
-	//DOM-ready or onload handler
-	//W3C event model
-	if ( doc.addEventListener ) {
-		doc.addEventListener( "DOMContentLoaded", readyCallback, false );
-		//fallback
-		win.addEventListener( "load", readyCallback, false );
-	}
-	// If IE event model is used
-	else if ( doc.attachEvent ) {
-		doc.attachEvent("onreadystatechange", readyCallback );
-		//fallback
-		win.attachEvent( "onload", readyCallback );
-	}
+
 })(this);