jafstar/ajaxLoadImagesProgress.html

## ajaxLoadImagesProgress.html
<!DOCTYPE HTML>
<html>
<head>
<title>AJAX TEST</title>
</head>
<body>

<div id="gallery">

	<div id="b0" class="block">
		<img id="image0" class="images" src="" />
		<div class="loader"></div>
		<div id="progress0" class="progress">0</div>
	</div>

	<div id="b1" class="block">
		<img id="image1" class="images" src="" />
		<div class="loader"></div>
		<div id="progress1" class="progress">0</div>
	</div>

	<div id="b2" class="block">
		<img id="image2" class="images" src="" />
		<div class="loader"></div>
		<div id="progress2" class="progress">0</div>
	</div>

</div>


<style>

body {background: #000;}
#gallery {
	width: 1000px;
	margin: 100px auto;

}
img {
	border: 1px solid #333;
}
.block {
	width: 300px;
	height: 300px;
	position: relative;
	float: left;
	margin: 10px;
}

.images {
	width: 300px;
	height: 300px;
	overflow: hidden;

}

.progress {
	font: 18px arial;
	color: #fff;
	text-align: center;
}

.loader {
	background: #333;
	height: 10px;
	width: 0px;
}
</style>

<!--JAVASCRIPT-->
<script type="text/javascript">
//VARS
var $ = document;
var doc = $;
var img1 = "http://upload.wikimedia.org/wikipedia/commons/b/b1/Large_Low_Pressure_System_Northeastern_Pacific.JPG";
var img2 = "http://upload.wikimedia.org/wikipedia/commons/d/db/Barley_field-2007-02-22(large).jpg";
var img3 = "http://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG";

var imageArray = [img1,img2,img3];

//GET ID
$.id = function(x){
 return this.getElementById(x);
}

//GET CLASS
$.class = function(x){
  var e = document.getElementsByTagName('*');
	var list = [];
    for(var i=0; i < e.length; i++){
		if(e[i].className == x){
			//PUSH
			list.push(e[i]);
		}
	}
	//RETURN
	return list;
}


//ONLOAD
$.onload = start();


//START
function start(){

	console.log('app started');
 loadImages();
}

function reqListener (evt) {
  //console.log(this.responseText);
  	console.log('fin!');
  console.log(evt.target.response);
 	var item = evt.target.itemNum;
  var url = window.URL = window.webkitURL;

  $.id('image'+item).src = url.createObjectURL(this.response);
  //$.id('image0').innerHTML= "<img src='data:image/jpg;base64,"+evt.target.responseText+" />";
};

function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = Math.ceil(oEvent.loaded / oEvent.total * 100);
    var item = oEvent.target.itemNum;

    $.id("b"+item).childNodes[3].style.width = (percentComplete *3)+"px";
    $.id("progress"+item).innerHTML=percentComplete;

    console.log(percentComplete + "% Img " + item);
  } else {
   	console.log('XMLHttpRequest 2 not available');
  }
}


function loadImages(){

	for(var i=0; i<imageArray.length;i++){
		ajax(imageArray[i],i);
		console.log('IMAGE: '+i);
	}

}

function ajax(file,num){
	var oReq = new XMLHttpRequest();
	oReq.onload = reqListener;
	oReq.responseType = "blob";
	oReq.itemNum = num;
	oReq.addEventListener("progress", updateProgress, false);
	oReq.open("get", file, true);
	oReq.send();
}

//REFERENCES
//https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
//http://stackoverflow.com/questions/17657184/using-jquerys-ajax-method-to-retrieve-images-as-a-blob

</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>AJAX TEST</title>
	</head>
	<body>

	<div id="gallery">

	<div id="b0" class="block">
	<img id="image0" class="images" src="" />
	<div class="loader"></div>
	<div id="progress0" class="progress">0</div>
	</div>

	<div id="b1" class="block">
	<img id="image1" class="images" src="" />
	<div class="loader"></div>
	<div id="progress1" class="progress">0</div>
	</div>

	<div id="b2" class="block">
	<img id="image2" class="images" src="" />
	<div class="loader"></div>
	<div id="progress2" class="progress">0</div>
	</div>

	</div>




	<style>

	body {background: #000;}
	#gallery {
	width: 1000px;
	margin: 100px auto;

	}
	img {
	border: 1px solid #333;
	}
	.block {
	width: 300px;
	height: 300px;
	position: relative;
	float: left;
	margin: 10px;
	}

	.images {
	width: 300px;
	height: 300px;
	overflow: hidden;

	}

	.progress {
	font: 18px arial;
	color: #fff;
	text-align: center;
	}

	.loader {
	background: #333;
	height: 10px;
	width: 0px;
	}
	</style>

	<!--JAVASCRIPT-->
	<script type="text/javascript">
	//VARS
	var $ = document;
	var doc = $;
	var img1 = "http://upload.wikimedia.org/wikipedia/commons/b/b1/Large_Low_Pressure_System_Northeastern_Pacific.JPG";
	var img2 = "http://upload.wikimedia.org/wikipedia/commons/d/db/Barley_field-2007-02-22(large).jpg";
	var img3 = "http://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG";

	var imageArray = [img1,img2,img3];

	//GET ID
	$.id = function(x){
	return this.getElementById(x);
	}

	//GET CLASS
	$.class = function(x){
	var e = document.getElementsByTagName('*');
	var list = [];
	for(var i=0; i < e.length; i++){
	if(e[i].className == x){
	//PUSH
	list.push(e[i]);
	}
	}
	//RETURN
	return list;
	}


	//ONLOAD
	$.onload = start();



	//START
	function start(){

	console.log('app started');
	loadImages();
	}

	function reqListener (evt) {
	//console.log(this.responseText);
	console.log('fin!');
	console.log(evt.target.response);
	var item = evt.target.itemNum;
	var url = window.URL = window.webkitURL;

	$.id('image'+item).src = url.createObjectURL(this.response);
	//$.id('image0').innerHTML= "<img src='data:image/jpg;base64,"+evt.target.responseText+" />";
	};

	function updateProgress (oEvent) {
	if (oEvent.lengthComputable) {
	var percentComplete = Math.ceil(oEvent.loaded / oEvent.total * 100);
	var item = oEvent.target.itemNum;

	$.id("b"+item).childNodes[3].style.width = (percentComplete *3)+"px";
	$.id("progress"+item).innerHTML=percentComplete;

	console.log(percentComplete + "% Img " + item);
	} else {
	console.log('XMLHttpRequest 2 not available');
	}
	}



	function loadImages(){

	for(var i=0; i<imageArray.length;i++){
	ajax(imageArray[i],i);
	console.log('IMAGE: '+i);
	}

	}

	function ajax(file,num){
	var oReq = new XMLHttpRequest();
	oReq.onload = reqListener;
	oReq.responseType = "blob";
	oReq.itemNum = num;
	oReq.addEventListener("progress", updateProgress, false);
	oReq.open("get", file, true);
	oReq.send();
	}

	//REFERENCES
	//https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
	//http://stackoverflow.com/questions/17657184/using-jquerys-ajax-method-to-retrieve-images-as-a-blob

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