Speed up slow loading images?

I have the following jquery mobile + phonegap app. I'm finding when I load the app, the images in the separate pages load pretty slowly. Any advice on how to speed up loading this app?

```




















#main_bg {
background: transparent url('http://onwardstate.com/wp-content/uploads/2012/11/golden-retreiver-puppies.jpeg') no-repeat left top;
}

#sortedList li {
background-color: transparent !important;
background-image: url('') !important;
}




// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is loaded and it is now safe to make calls Cordova methods
function onDeviceReady() {
// Check if app has connectivity
if ( checkConnection() == 'No network connection' ) {
alert('Please connect to the internet')
}
// If app does have internet
else {
$.mobile.showPageLoadingMsg("d", "Relax, dude. We're loading today's pictures.");

loadHistory();
loadSpace();
loadEarth();
loadCity();

$.mobile.hidePageLoadingMsg();
}
}

function checkConnection() {
var networkState = navigator.network.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.CELL] = 'Cell generic connection';
states[Connection.NONE] = 'No network connection';
return states[ne

Instead of doing a separate function for loadspace and loadcity and loadearth could you do a function for LoadCanvas? or something like that, it just seems like you are writing the same code for each load, see if you can make it one function that you feed the URL to, I think that would clean up some of your code and make it more maintainable.

If you had one function for loading these Templates then you could add Templates a lot easier in your code.

Here is what the function might look like

function loadArea(url, elementID){
    $.getJSON(url ,function(json){
        $.each(json,function(i,item){
            $("#" + elementID).append(''+item.title+'');
        });
    });
}

Then all you have to do is call the function with the URL and the ElementID when you want these to load. This will make it much easier when adding new pages, this DRYs things out a bit.

AND

Try only loading the images that they want loaded to start out, that would speed up the initial load of the application, Load the rest on Demand.

I would also remove the commented code as well, if it is dead, bury it.

StackExchange Code Review Q#30080, answer score: 4