Last active
November 16, 2016 15:44
-
-
Save jafstar/7327160 to your computer and use it in GitHub Desktop.
AJAX Load Images with Progress Bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment