jquery - jQueryMobileはページ全体の読み込みが完了するまで待機します

Question

jQuery Mobileに関する私の質問は、ページが完全に読み込まれるまで（すべての画像、テキスト）、実際に読み込まれるまで待つ方法です。明確にするために、ユーザーがリンクをクリックすると、ページの読み込み中は読み込み中のグラフィックが画面に表示されたままになり、完全に読み込まれると、読み込み中のグラフィックを非表示にしてページを読み込みます。

これは可能ですか？

Answer 1

$(document).on('click', '.my-custom-links', function() {
    //get the requested page
    $.ajax({
        url     : this.href,
        success : function (page) {
            //get only the first data-role="page" element
            var $page = $(page).find('[data-role="page"]').first();

            //now bind an event handler to all the elements that will need to load
            var $assets       = $page.find('img, script, link'),
                assets_loaded = 0;

            //make sure to bind to the load event before adding the element to the DOM
            $assets.on('load', function () {
                assets_loaded++;
                if (assets_loaded == $assets.length) {
                    //all the assets have loaded, so navigate to the new page
                    $.mobile.changePage($page);
                }
            });

            //add new page to the DOM
            $.mobile.pageContainer.append($page)
        },
        error   : function (jqXHR, textStatus, errorThrown) { /*Don't forget to handle errors*/ }
    });
    return false;
});

最初の亀裂があります。基本的なアイデアは、@Kevin B. がコメントしたものからそれほど離れていません。特定のリンクのクリックをハイジャックし、リンクがターゲットとしているページを取得して DOM に追加し、アセットがロードされた後にのみ表示します。