JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<img id="img" src="http://www.grasphub.com/wp-content/uploads/2013/12/Preloader_1.gif">

JavaScript

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    console.log("State: ", this.readyState, "Status: ", this.status);
    if (this.readyState == 4 && this.status == 200){
        var url = window.URL || window.webkitURL;
        document.querySelector("#img").src = 
            url.createObjectURL(this.response);
    }else if(this.readyState == 4){
        console.log(this.status);
    }else{
        //not ready yet
    }
}
xhr.open('GET', 'https://www.gravatar.com/avatar/7b67c827ee1671ba3b43f4aebf6794fb?s=128&d=identicon&r=PG');
xhr.responseType = 'blob';
setTimeout(function(){
    //simulate loading animation
	xhr.send();
}, 2000);