shigeki/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Ajax GET Test</title>
    <script>
      window.addEventListener('DOMContentLoaded', function() {
        if (window.chrome.loadTimes().npnNegotiatedProtocol) {
          var protocol = document.getElementById("protocol");
          protocol.innerHTML = window.chrome.loadTimes().npnNegotiatedProtocol;
        }
        var run = false;
        var max = 1000;
        var start;
        var time = document.getElementById("time");
        var result = document.getElementById("result");
        var start_button = document.getElementById("start");
        var stop_button = document.getElementById("stop");
        var tmout;
        start_button.addEventListener('click', function() {
          if (run) return;
          run = true;
          start = Date.now();
          tmout = setInterval(function() {
            var now = Date.now();
            time.innerText = (parseInt((now - start)/100)/10).toFixed(1) + "[sec]";
          }, 100);
          getImage(0);
        });
        stop_button.addEventListener('click', function() {
          if (!run) return;
          clearTimeout(tmout);
          run = false;
        });
        function getImage(i) {
          if (!run || i === max) {
            clearTimeout(tmout);
            return;
          }
          var xhr = new XMLHttpRequest();
          xhr.open("GET", "pics/" + i +".png", true);
          xhr.responseType = "blob";
          xhr.onreadystatechange = function () {
            if (xhr.readyState == xhr.DONE) {
              var image = document.createElement("img");
              image.addEventListener("load", function (e) {
                URL.revokeObjectURL(e.target.src);
                i++;
                getImage(i);
              });
              image.src = URL.createObjectURL(xhr.response);
              while (result.hasChildNodes()) {
                result.removeChild(result.firstChild);
              }
              result.appendChild(image);
            }
          };
          xhr.send();
        }
      });
    </script>
  </head>
  <body>
     <button id="start">Start</button> : <button id="stop">Stop</button> : <span id="protocol"></span>: Time: <span id="time"></span><br>
     <div id="result"></div><br>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8" />
	<title>Ajax GET Test</title>
	<script>
	window.addEventListener('DOMContentLoaded', function() {
	if (window.chrome.loadTimes().npnNegotiatedProtocol) {
	var protocol = document.getElementById("protocol");
	protocol.innerHTML = window.chrome.loadTimes().npnNegotiatedProtocol;
	}
	var run = false;
	var max = 1000;
	var start;
	var time = document.getElementById("time");
	var result = document.getElementById("result");
	var start_button = document.getElementById("start");
	var stop_button = document.getElementById("stop");
	var tmout;
	start_button.addEventListener('click', function() {
	if (run) return;
	run = true;
	start = Date.now();
	tmout = setInterval(function() {
	var now = Date.now();
	time.innerText = (parseInt((now - start)/100)/10).toFixed(1) + "[sec]";
	}, 100);
	getImage(0);
	});
	stop_button.addEventListener('click', function() {
	if (!run) return;
	clearTimeout(tmout);
	run = false;
	});
	function getImage(i) {
	if (!run \|\| i === max) {
	clearTimeout(tmout);
	return;
	}
	var xhr = new XMLHttpRequest();
	xhr.open("GET", "pics/" + i +".png", true);
	xhr.responseType = "blob";
	xhr.onreadystatechange = function () {
	if (xhr.readyState == xhr.DONE) {
	var image = document.createElement("img");
	image.addEventListener("load", function (e) {
	URL.revokeObjectURL(e.target.src);
	i++;
	getImage(i);
	});
	image.src = URL.createObjectURL(xhr.response);
	while (result.hasChildNodes()) {
	result.removeChild(result.firstChild);
	}
	result.appendChild(image);
	}
	};
	xhr.send();
	}
	});
	</script>
	</head>
	<body>
	<button id="start">Start</button> : <button id="stop">Stop</button> : <span id="protocol"></span>: Time: <span id="time"></span><br>
	<div id="result"></div><br>
	</body>
	</html>