jakearchibald · August 24, 2011 16:49 · ahume · Oct 31, 2011
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 </head>
 <body>
 	<script id="whatever">document.write('<!'+'--')</script>
 	<img src="filth.jpg" />
 	<!---->
 	<script>
 		// filth.jpg will start loading now for users without js.
 		// However, it'll appear inside a comment for js users, so won't load.
 		// Then you can do...
 		var commentedHtml = document.getElementById('whatever').nextSibling.nodeValue.slice(0, -4);
 		
 		// Now you can set that as the innerHTML of something and the img will load.
 		// Perfect for scrolly-load situations, or if you wanted to pipe 100 thumbnails
 		// down one http connection, whatever.
 		
 		// Props to @pornelski who came up with the basis of the solution.
 		// It's as dirty as it is awesome.
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	</head>
	<body>
	<script id="whatever">document.write('<!'+'--')</script>
	<img src="filth.jpg" />
	<!---->
	<script>
	// filth.jpg will start loading now for users without js.
	// However, it'll appear inside a comment for js users, so won't load.
	// Then you can do...
	var commentedHtml = document.getElementById('whatever').nextSibling.nodeValue.slice(0, -4);

	// Now you can set that as the innerHTML of something and the img will load.
	// Perfect for scrolly-load situations, or if you wanted to pipe 100 thumbnails
	// down one http connection, whatever.

	// Props to @pornelski who came up with the basis of the solution.
	// It's as dirty as it is awesome.
	</script>
	</body>
	</html>