4
\$\begingroup\$

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?

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <!-- Jquery mobile css -->
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">

        <!-- Jquery javascript -->
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Cordova/phonegap js -->
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>

        <style>
            #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;
            }
        </style>

        <!-- Parse json + display -->
    <script type="text/javascript">
    // 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[networkState];
    }
    function loadHistory(){
        // $.mobile.showPageLoadingMsg("d", "Relax, dude.  We're loading history's pictures.");
        // Load history pictures
        var history_url='http://whispering-spire-7120.herokuapp.com/category/history';

        $.getJSON(history_url,function(json){
            $.each(json,function(i,item){

                $("#history").append('<center><img src = "'+item.url+'" style = "height: '+Number(item.old_height) * 300 / Number(item.old_width)+'px; width: 300px;"></center><p style = "margin-left:10px; margin-right:10px; font-size:15px;">'+item.title+'</p><br/>');
            });
            // $.mobile.hidePageLoadingMsg();
        });
    }

    function loadEarth(){
        // Load earth pictures
        var earth_url='http://whispering-spire-7120.herokuapp.com/category/earth';

        $.getJSON(earth_url,function(json){
            $.each(json,function(i,item){

                $("#earth").append('<center><img src = "'+item.url+'" style = "height: '+Number(item.old_height) * 300 / Number(item.old_width)+'px; width: 300px;"></center><p style = "margin-left:10px; margin-right:10px; font-size:15px;">'+item.title+'</p><br/>');
            });
            //$.mobile.hidePageLoadingMsg();
        });
    }
    function loadSpace(){
        // Load space pictures
        var space_url='http://whispering-spire-7120.herokuapp.com/category/space';

        $.getJSON(space_url,function(json){
            $.each(json,function(i,item){

                $("#space").append('<center><img src = "'+item.url+'" style = "height: '+Number(item.old_height) * 300 / Number(item.old_width)+'px; width: 300px;"></center><p style = "margin-left:10px; margin-right:10px; font-size:15px;">'+item.title+'</p><br/>');
            });
            //$.mobile.hidePageLoadingMsg();
        });
    }

    function loadCity(){
        // Load city pictures
        var city_url='http://whispering-spire-7120.herokuapp.com/category/city';

        $.getJSON(city_url,function(json){
            $.each(json,function(i,item){

                $("#city").append('<center><img src = "'+item.url+'" style = "height: '+Number(item.old_height) * 300 / Number(item.old_width)+'px; width: 300px;"></center><p style = "margin-left:10px; margin-right:10px; font-size:15px;">'+item.title+'</p><br/>');
            });
            //$.mobile.hidePageLoadingMsg();
        });
    }
        $(document).ready(function(){       
            //using deviceonready instead
        });
    </script>
    <!-- End parsing json + display -->

    <title> TablePics - Home</title>
    </head>

    <body>

        <!-- Beginning of page1 -->
        <div data-role="page" data-theme="c" id="main_bg"> 
            <!-- Header -->
            <div data-role="header" data-theme="b"> 
                <h1>TablePics</h1> 
            </div> 
             <!-- Content -->
             <div data-role="content">
                <!-- Display results of parsing json here -->
                <ul data-role="listview" id="sortedList">
                    <li><a href = "#city" data-prefetch>City</a></li>
                    <li><a href="#earth" data-prefetch>Earth</a></li>
                    <li><a href="#history" data-prefetch>History</a></li>
                    <li><a href = "#space">Space</a></li>
                </ul>
             </div>   
        </div>
        <!-- End of page1  -->

        <!-- Beginning of History -->
        <div data-role="page" data-theme="c" id = "history" data-add-back-btn="true">            

            <!-- Header -->
            <div data-role="header" data-theme="b"> 
                <h1>History</h1> 
            </div> 

             <!-- Content -->
             <div data-role="content" id = "history">
             </div>   
        </div>
        <!-- End of history  -->

        <!-- Beginning of Earth -->
        <div data-role="page" data-theme="c" id = "earth" data-add-back-btn="true">            

            <!-- Header -->
            <div data-role="header" data-theme="b"> 
                <h1>Earth</h1> 
            </div> 

             <!-- Content -->
             <div data-role="content" id = "earth">
             </div>   
        </div>
        <!-- End of earth  -->

        <!-- Beginning of Space -->
        <div data-role="page" data-theme="c" id = "space" data-add-back-btn="true">            

            <!-- Header -->
            <div data-role="header" data-theme="b"> 
                <h1>Space</h1> 
            </div> 

             <!-- Content -->
             <div data-role="content" id = "space">
             </div>   
        </div>
        <!-- End of space  -->

        <!-- Beginning of city -->
        <div data-role="page" data-theme="c" id = "city" data-add-back-btn="true">            

            <!-- Header -->
            <div data-role="header" data-theme="b"> 
                <h1>City</h1> 
            </div> 

             <!-- Content -->
             <div data-role="content" id = "city">
             </div> 
        </div>
        <!-- End of city  -->
    </body>
</html>
\$\endgroup\$
3
  • \$\begingroup\$ Can you reduce your code to only the parts concerned? \$\endgroup\$
    – Joseph
    Commented Aug 23, 2013 at 13:27
  • 5
    \$\begingroup\$ This is off-topic, but we are a friendly community, so I just wanted to point out that the golden-retreiver-puppies.jpeg is 384Kb. That is far too large, especially for mobile apps. \$\endgroup\$
    – konijn
    Commented Aug 18, 2014 at 20:26
  • \$\begingroup\$ This Question is being talked about on Meta, meta.codereview.stackexchange.com/q/2317/18427 \$\endgroup\$
    – Malachi
    Commented Aug 18, 2014 at 21:35

1 Answer 1

Reset to default
4
\$\begingroup\$

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('<center><img src = "'+item.url+'" style = "height: '+Number(item.old_height) * 300 / Number(item.old_width)+'px; width: 300px;"></center><p style = "margin-left:10px; margin-right:10px; font-size:15px;">'+item.title+'</p><br/>');
        });
    });
}

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.