1

phonegap と jquery mobile を使用しています。json/jquery を使用していくつかの画像を DOM にロードしています。画像の読み込みが非常に遅いことがよくあります。これを改善する方法についてのアイデアはありますか？

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<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>


        <!-- 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();
            // $.mobile.hidePageLoadingMsg();

            $(document).on('vclick','#load_more', function() {

        alert('button clicked');
            })
        }


    }

    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 today'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){

                $("#allpictures").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();
        });

    }

    </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" id = "allpictures">
                <!-- Display results of parsing json here -->

             </div> 
             <!-- end of content -->


             <div data-role="footer" data-theme="b">       
                <div data-role="navbar">
                    <a id ="load_more" data-role="button" data-theme="b">Load more</a>
                </div><!-- /navbar -->
            </div><!-- /footer -->


        </div>
        <!-- End of page1  -->


    </body>

</html>

<!-- Certificates for iPhone: http://www.youtube.com/watch?v=u37QMKFZl0k -->
4

0 に答える 0