jQuery Mobile 等待整个页面加载完毕

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，然后仅在资源加载后显示。