It's taking 21 seconds per request for snippet.json and images, causing my widget to load in 42 seconds consistently. That just doesn't seem right.
Check out this code snippet below:
<script type="text/javascript">
function fetchJSONFile(path, callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
var data = JSON.parse(httpRequest.responseText);
if (callback) callback(data);
};
};
};
httpRequest.open('GET', path);
httpRequest.send();
}
// This function fetches the JSON file and executes a callback once it's available
fetchJSONFile('http://ecorebox.com/companies/1/snippet.json', function(data){
// process the data
var trees = data['trees'];
var water = data['water'];
var energy = data['electricity'];
// Widget creation with dynamic content
var widget = document.createElement("div");
widget.id = 'erb_widget';
widget.style.width = "200px";
widget.style.height = "400px";
// Adding more styles...
// Appending elements to the widget
$('.content').append(widget);
document.getElementById('erb_widget').appendChild(logo);
document.getElementById('erb_widget').appendChild(txt);
// More appends...
});
</script>
If you want to see how this works live, visit . Eco ReBox is a Rails application hosted on Heroku. Let me know if you need any specific code from there to better understand the situation.