Polyfill array object in order to enable the loop in steps
| <html> | |
| <body> | |
| <span id='counter' style='position:fixed;bottom:10px;right:10px;color:white;background:black;padding:10px;'></span> | |
| </body> | |
| <script> | |
| Object.defineProperty(Array.prototype,'onPassLast',{ | |
| get: function(){this.onPassLastFN(this)}, | |
| set: function(fn){this.onPassLastFN=fn;} | |
| }); | |
| Object.defineProperty(Array.prototype,'loop',{ | |
| set: function(cb){ | |
| if(typeof cb == "function"){this.callBack=cb;}else{this.currentIndex=this.currentIndex+cb;}; | |
| this.currentIndex=this.currentIndex==undefined?0:this.currentIndex; | |
| if(this.currentIndex>=this.length){ | |
| return this.onPassLast; | |
| }else{ | |
| this.callBack!=undefined?this.callBack(this[this.currentIndex],this):false; | |
| }; | |
| } | |
| }); | |
| Object.defineProperty(Array.prototype,'next',{ | |
| get: function(){this.loop=1;} | |
| }); | |
| var ajax=function(url,cb){//a trivial version of Ajax, only for download data from a remote server | |
| var xhttp = new XMLHttpRequest(); | |
| xhttp.onreadystatechange = function() { | |
| if (xhttp.readyState == 4 && xhttp.status == 200) { | |
| cb(JSON.parse(xhttp.responseText)); | |
| } | |
| }; | |
| xhttp.open("GET", url, true); | |
| xhttp.send(); | |
| } | |
| var counter=document.getElementById("counter"); | |
| ajax("http://jsonplaceholder.typicode.com/photos",function(data){ | |
| data=data.slice(0, 50);//what the heck, I just need 50 elements :) | |
| data.onPassLast=function(array){alert("finish!", JSON.stringify(array));}//on passed all elements, do this function | |
| data.loop=function(element,array){ | |
| var img=document.createElement("img"); | |
| img.src=element.url; | |
| img.style.width="100px"; | |
| img.onload=function(){ | |
| window.scrollTo(0,document.body.scrollHeight);//subtle touch | |
| array.next;//and when the image is loaded move to next member of the series | |
| counter.innerHTML=data.currentIndex+"/"+data.length;//Show me on counter | |
| } | |
| document.body.appendChild(img); | |
| } | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment