在jquery mobile中頁面轉換期間的白色屏幕

Question

我們正在開發一個jQueryMobile與應用cordova 。之后成功登錄我們重定向到家里page.But之前主頁加載white screen將appeaser.We做R＆d，我們發現了一些類似的解決方案

.ui-page { -webkit-backface-visibility: hidden; }
.ui-mobile, .ui-mobile body{
  background:#999;
}
$(document).on("mobileinit", function(){
    $.mobile.defaultDialogTransition = "none";
    $.mobile.defaultPageTransition = "none";
});

我們也試過微調器，但是首先顯示白色屏幕然后旋轉器將出現

window.document.addEventListener("deviceready", appReady, false);
function appReady(){
     console.log("******02");
        spinnerplugin.show({
                    overlay: false,    // defaults to true
                    timeout: 30,       // defaults to 0 (no timeout)
                    fullscreen: true,  // defaults to false
                });
     }  

因此，請指導我們如何在頁面轉換時刪除或隱藏白屏。

Answer 1

這是一個相對簡單的修復，我每次都必須這樣做。 你需要從cordova添加啟動畫面插件：

cordova plugin add cordova-plugin-splashscreen

然后將以下行添加到項目文件夾根目錄中的config.xml：

<preference name="AutoHideSplashScreen" value="false" />

然后在你的onload函數或你的deviceready listener觸發的函數中使用這個javascript來隱藏啟動畫面：

navigator.splashscreen.hide();

如果需要，您還可以添加超時以顯示啟動屏幕更長時間：

setTimeout(function() {
    navigator.splashscreen.hide();
}, 2000); //Time to delay function in milliseconds

有關該插件的更多信息，請訪問：

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/

Answer 2

嘗試添加此元標記（ user-scalable = no ）：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>

並將其添加到您的css文件：

.ui-page {
    -webkit-backface-visibility: hidden;
}