audionerd · November 9, 2012 21:48 · audionerd · Nov 9, 2012 · audionerd · Nov 9, 2012
diff --git a/index.html b/index.html
 <html>
  
  <head>
  </head>

  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <script src="https://raw.github.com/paulirish/matchMedia.js/master/matchMedia.js"></script>
    <script src="https://raw.github.com/paulirish/matchMedia.js/master/matchMedia.addListener.js"></script>

    <script src="https://raw.github.com/borismus/srcset-polyfill/master/build/srcset.js"></script>

    <figure data-responsive-img>
      <script>document.write('<' + '!--')</script><noscript>
        <img src="http://www.cujo.jp/media/320/c/wp-content/uploads/2012/11/imageswap-480.png" alt="" title="" srcset="
            http://www.cujo.jp/media/220/c/wp-content/uploads/2012/11/imageswap-480minus.png 320w,
            http://www.cujo.jp/media/440/c/wp-content/uploads/2012/11/imageswap-480minus.png 320w 2x,
            http://www.cujo.jp/media/320/c/wp-content/uploads/2012/11/imageswap-768.png 480w,
            http://www.cujo.jp/media/420/c/wp-content/uploads/2012/11/imageswap-1024plus.png 768w, 
            http://www.cujo.jp/media/560/c/wp-content/uploads/2012/11/imageswap-1440plus.png 1440w" />
      </noscript -->  
    </figure>

    <script>

      function isSrcsetImplemented() {
        var img = new Image();
        return 'srcset' in img;
      }

      var update = function() {

        var viewportInfo = new ViewportInfo();
        viewportInfo.compute();

        var figures = $('figure[data-responsive-img]')

        var figureEl = $(figures[0])

        var imgEl = figureEl.find('img')

        var src;

        // have we created an image yet?
        if ( imgEl.length < 1 ) {
          var scriptEl, raw, matches;
          
          scriptEl = figureEl.children('script')

          raw = scriptEl[0].nextSibling.nodeValue.slice(10, -11)



          matches = raw.match(/src=(\S+)\"/)
          if (matches.length > 1) { src = matches[1] }
          
          raw = raw.replace(/src=(\S+)\"/, 'src=""')

          imgEl = $(raw)

          scriptEl.replaceWith(imgEl)

        } else {

          src = imgEl.attr('src')

        }

        // apply the requested src
        srcsetInfo = new SrcsetInfo({src: src, srcset: imgEl.attr('srcset') });
        var imageInfo = viewportInfo.getBestImage(srcsetInfo);

        imgEl.attr('src', imageInfo.src)
        // Scale the image if necessary (ie. x != 1).
        imgEl[0].style.webkitTransform = 'scale(' + (1/imageInfo.x) + ')';
        imgEl[0].style.webkitTransformOrigin = '0 0';

      }

      var setSize = function(size) {
        console.log("triggered at", size)
        update() // update images
      }

      var handlers = [
        ["screen and (max-width: 480px)", function() { setSize("less than 480") } ],
        ["screen and (min-width: 481px) and (max-width: 767px)", function() { setSize("480+") } ],
        ["screen and (min-width: 768px) and (max-width: 979px)", function() { setSize("768") } ],
        ["screen and (min-width: 980px)", function() { setSize("980") } ]
      ]

      var listen = function(mq, fn) {
        var m;
        m = window.matchMedia(mq)
        m.addListener(fn); // schedule future tests
        if (m.matches) { fn.call(this, m) }  // run the test
      }

      for (i = 0; i < handlers.length; i++) {
        listen.apply(this, handlers[i])
      }

    </script>
  </body>
 </html>
	<html>

	<head>
	</head>

	<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

	<script src="https://raw.github.com/paulirish/matchMedia.js/master/matchMedia.js"></script>
	<script src="https://raw.github.com/paulirish/matchMedia.js/master/matchMedia.addListener.js"></script>

	<script src="https://raw.github.com/borismus/srcset-polyfill/master/build/srcset.js"></script>

	<figure data-responsive-img>
	<script>document.write('<' + '!--')</script><noscript>
	<img src="http://www.cujo.jp/media/320/c/wp-content/uploads/2012/11/imageswap-480.png" alt="" title="" srcset="
	http://www.cujo.jp/media/220/c/wp-content/uploads/2012/11/imageswap-480minus.png 320w,
	http://www.cujo.jp/media/440/c/wp-content/uploads/2012/11/imageswap-480minus.png 320w 2x,
	http://www.cujo.jp/media/320/c/wp-content/uploads/2012/11/imageswap-768.png 480w,
	http://www.cujo.jp/media/420/c/wp-content/uploads/2012/11/imageswap-1024plus.png 768w,
	http://www.cujo.jp/media/560/c/wp-content/uploads/2012/11/imageswap-1440plus.png 1440w" />
	</noscript -->
	</figure>

	<script>

	function isSrcsetImplemented() {
	var img = new Image();
	return 'srcset' in img;
	}

	var update = function() {

	var viewportInfo = new ViewportInfo();
	viewportInfo.compute();

	var figures = $('figure[data-responsive-img]')

	var figureEl = $(figures[0])

	var imgEl = figureEl.find('img')

	var src;

	// have we created an image yet?
	if ( imgEl.length < 1 ) {
	var scriptEl, raw, matches;

	scriptEl = figureEl.children('script')

	raw = scriptEl[0].nextSibling.nodeValue.slice(10, -11)



	matches = raw.match(/src=(\S+)\"/)
	if (matches.length > 1) { src = matches[1] }

	raw = raw.replace(/src=(\S+)\"/, 'src=""')

	imgEl = $(raw)

	scriptEl.replaceWith(imgEl)

	} else {

	src = imgEl.attr('src')

	}

	// apply the requested src
	srcsetInfo = new SrcsetInfo({src: src, srcset: imgEl.attr('srcset') });
	var imageInfo = viewportInfo.getBestImage(srcsetInfo);

	imgEl.attr('src', imageInfo.src)
	// Scale the image if necessary (ie. x != 1).
	imgEl[0].style.webkitTransform = 'scale(' + (1/imageInfo.x) + ')';
	imgEl[0].style.webkitTransformOrigin = '0 0';

	}

	var setSize = function(size) {
	console.log("triggered at", size)
	update() // update images
	}

	var handlers = [
	["screen and (max-width: 480px)", function() { setSize("less than 480") } ],
	["screen and (min-width: 481px) and (max-width: 767px)", function() { setSize("480+") } ],
	["screen and (min-width: 768px) and (max-width: 979px)", function() { setSize("768") } ],
	["screen and (min-width: 980px)", function() { setSize("980") } ]
	]

	var listen = function(mq, fn) {
	var m;
	m = window.matchMedia(mq)
	m.addListener(fn); // schedule future tests
	if (m.matches) { fn.call(this, m) } // run the test
	}

	for (i = 0; i < handlers.length; i++) {
	listen.apply(this, handlers[i])
	}

	</script>
	</body>
	</html>