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

jQuery Mobile等到整个页面完成加载

1 个答案: