Loading listview with 5 elements (incl. images) takes 8 seconds..

Loading listview with 5 elements (incl. images) takes 8 seconds..

Hi,
I am not a professional mobile developer either. Not yet. But investigated quite some time with this issue. I read a lot about performance issues using jquery mobile on phonegap, especially with the listview element. But still I cannot believe that it is normal that it takes 8 seconds to show a listview with 5 elements. Or could it be a problem that I have images implemented in my listview?
I would appreciate it a lot, if somebody could take a look and maybe finds some problems with my code.

What happens in the app:
There is a button called "Übungen" which calls the javascipt function loadExercises()". This function uses ajax to call a remote php script "getExercises.php" (using mysql query) to generate the html code inside the listview element.

environment:
- phonegap
- query.mobile-1.4.5.min.css
- jquery-1.11.1.min.js
- jquery.mobile-1.4.5.min.js
- android 4.4.2
- testing my app on a samsung galaxy note s3


Body of index.html:
...
<!-- ********************* main ********************* -->
        <div data-role="page" id="main" data-theme="b">
            <div data-role="header" data-position="fixed">
                <h1>Startbildschirm</h1>
            </div><!-- /header -->
 
              <div data-role="content">
                <p><a href="javascript:loadExercises()" data-role="button">Übungen</a></p>
                <p><a href="javascript:capturePhoto()" data-role="button">Foto</a></p>
                <p><a href="javascript:captureVideo()" data-role="button">Video</a></p>
            </div><!-- /content -->
 
            <div data-role="footer" data-position="fixed">
                <h4>Page Footer 1</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
 
<!-- ********************* listExercises ********************* -->
        <div data-role="page" id="listExercises" data-theme="b" >
            <div data-role="header" data-position="fixed"  data-add-back-btn="true">
                <h1>Übungen</h1>
            </div><!-- /header -->
 
            <div data-role="content">
                <div id="exercisesContainer"></div>   
            </div><!-- /content -->
    
            <div data-role="footer" data-position="fixed">

            </div><!-- /footer -->
        </div><!-- /page -->
 ...      


javascript function loadExercises():

function loadExercises() {
       
            urlstring = "[URL]/getExercises.php";

            $.ajax({
                url: urlstring,
                type: "GET",
                dataType: "html",   //expect html to be returned 
                success:function(data){
                    $("#exercisesContainer").html(data);
                    $('[data-role=listview]').listviewExercises.listview('refresh');
                    window.location.href = "#listExercises";
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("Status: " + textStatus); alert("Error: " + errorThrown);
                }
            });
        }


remoge php script "getExercises.php":

...
$result = mysql_query("SELECT id, filename FROM media");  
?>

<ul data-role="listview" id="listviewExercises" data-inset="true">
<?php
//fetch tha data from the database
while ($row = mysql_fetch_array($result)) {
    echo "<li><a href='javascript:loadSingleExercise(".$row['id'].")'>";
    echo "<img src='".$row['filename']."' width='100%'>";
    echo "h2>".$row['filename']."</h2>";
    echo "<p>Beschreibung</p></a>";
    echo "</li>";
}

?>
</ul>


Thanks a lot for any hints!
Martin