Skip to content

Instantly share code, notes, and snippets.

@withinboredom
Created April 2, 2015 01:43
Show Gist options
  • Save withinboredom/567f4f5f0b42d6eaf876 to your computer and use it in GitHub Desktop.
Save withinboredom/567f4f5f0b42d6eaf876 to your computer and use it in GitHub Desktop.
Loading a really big js file while providing user feedback via a progress bar
(function() {
var totalcss = 0;
var totaljs = 0;
var loadedjs = 0;
var loadedcss = 0;
var hasCss = false;
var hasJs = false;
var doStyle = function() {
var src = cssxhr.responseText;
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.stylesheet) {
style.stylesheet.cssText = src;
}
else {
style.appendChild(document.createTextNode(src));
}
head.appendChild(style);
};
var doJs = function() {
eval(jsxhr.responseText);
};
var compute = function() {
if (hasCss && hasJs) {
document.getElementById("loading-loader").style.width = "100%";
setTimeout(function() {
doStyle();
document.getElementById("content").innerHTML = "";
setTimeout(function() {
doJs();
}, 50);
}, 100);
}
};
var jsxhr = new XMLHttpRequest();
jsxhr.upload.addEventListener("progress", function (evt) {
if(evt.lengthComputable) {
totaljs = evt.total;
loadedjs = evt.loaded;
var total = totalcss + totaljs;
var loaded = loadedcss + loadedjs;
var percent = loaded / total * 100;
document.getElementById("loading-loader").style.width = percent + "%";
}
}, false);
jsxhr.addEventListener("progress", function(evt) {
if(evt.lengthComputable) {
totaljs = evt.total;
loadedjs = evt.loaded;
var total = totalcss + totaljs;
var loaded = loadedcss + loadedjs;
var percent = loaded / total * 100;
document.getElementById("loading-loader").style.width = percent + "%";
}
}, false);
jsxhr.addEventListener("readystatechange", function() {
if (jsxhr.readyState == 4 && jsxhr.status == 200) {
hasJs = true;
compute();
}
}, false);
var cssxhr = new XMLHttpRequest();
cssxhr.upload.addEventListener("progress", function (evt) {
if(evt.lengthComputable) {
totalcss = evt.total;
loadedcss = evt.loaded;
var total = totalcss + totaljs;
var loaded = loadedjs + loadedcss;
var percent = loaded / total * 100;
document.getElementById("loading-loader").style.width = percent + "%";
}
}, false);
cssxhr.addEventListener("progress", function(evt) {
if(evt.lengthComputable) {
totalcss = evt.total;
loadedcss = evt.loaded;
var total = totalcss + totaljs;
var loaded = loadedjs + loadedcss;
var percent = loaded / total * 100;
document.getElementById("loading-loader").style.width = percent + "%";
}
}, false);
cssxhr.addEventListener("readystatechange", function() {
if (cssxhr.readyState == 4 && cssxhr.status == 200) {
hasCss = true;
compute();
}
}, false);
jsxhr.open("GET", "/assets/scripts.js", true);
cssxhr.open("GET", "/assets/styles.css", true);
jsxhr.send();
cssxhr.send();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment