Skip to content

Instantly share code, notes, and snippets.

@srobbin
Created January 31, 2012 17:11
Show Gist options
  • Save srobbin/1711644 to your computer and use it in GitHub Desktop.
Save srobbin/1711644 to your computer and use it in GitHub Desktop.
Responsive image test with NOSCRIPT
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Responsive image test with NOSCRIPT</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<style>
.container { width: 960px; margin: 0 auto; }
img { max-width: 100%; }
/* Responsive style(s) */
@media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 420px; } }
@media only screen and (max-width: 479px) { .container { width: 300px; } }
</style>
</head>
<body>
<div class="container">
<noscript><img src="http://srobbin.com/demos/responsive-images/worlds-collide-large.jpg" data-image-small="http://srobbin.com/demos/responsive-images/worlds-collide-small.jpg" alt="When World's Collide" /></noscript>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$("noscript").each(function() {
var $self = $(this)
, $img = $( $self.text() ); // Doesn't seem like we can use regular traveral to get at the img tag
// Resize for touch devices
if("ontouchstart" in window ) {
$img.attr("src", $img.attr("data-image-small") );
}
// Replace the NOSCRIPT tag
$self.replaceWith( $img );
});
</script>
</body>
</html>
@srobbin
Copy link
Author

srobbin commented Jan 31, 2012

As Ethan pointed out, there's already an existing solution that uses a noscript tag. I love that the attributes are on the noscript tag itself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment