krpano啓動畫面的內容，通常會在krpano代碼內設計一個layer元素，且全屏覆蓋在全景之上。當全景圖加載完成或預覽圖加載完成時，則移除layer元素（讓layer的visible爲false，或者將其座標位置設置到屏幕外）。
問題是，有時候加載krpano viewer文件（tour.js）以及分析krpano xml這個時間也比較長，導致該layer元素出現的時機較晚，沒有起到應有的啓動畫面的作用。那麼，我們可以在加載tour.js之前來加載啓動畫面，這樣就避免了以上等待啓動畫面出現過長的情況。那麼最簡單的啓動畫面就是一個文字div，其出現的時間等同於加載html文件自身的時間。
所有代碼都是在tour.html中完成，無需涉及krpano的xml文件。下面高亮部分是關鍵代碼。
<!DOCTYPE html>
<html>
<head>
<title>krpano</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
@-ms-viewport { width:device-width; }
@media only screen and (min-device-width:800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
</style>
</head>
<body>
<div id="loadinginfo" style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px;pointer-events:none;z-index:2;font-size:24px;font-weight:bold;"><br> 加載中...<br></div>
<script src="tour.js"></script>
<div id="pano" style="position:absolute;z-index:1;width:100%;height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
var krpano = null;
embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true,onready:krpano_onready_callback});
// 在krpano嵌入到html且可使用時執行回調函數
function krpano_onready_callback(krpano_interface)
{
krpano = krpano_interface;
krpano.set("events[loadtext].keep", "true");
krpano.set("events[loadtext].onloadcomplete", "jscall('document.body.removeChild(loadinginfo)'); set(events[loadtext].onloadcomplete,null); ");
}
</script>
</div>
</body>
</html>
- 19行的div的id爲loadtext，該div即爲一個全屏黑屏，中間爲白色文字“加載中……”。其z-index比下面pano的z- index要大。所以會在上面顯示。
- krpano變量是krpano全局接口。
- embedpano中設置onready回調參數，以便在viewer加載完成後在krpano viewer中設置一個onloadcomplete事件。
- 那麼實際上我們在krpano_onready_callback所執行的
krpano.set("events[loadtext].keep", "true");
krpano.set("events[loadtext].onloadcomplete", "jscall('document.body.removeChild(loadinginfo)'); set(events[loadtext].onloadcomplete,null); ");
等同於在tour.xml中寫上
<events name="loadtext" keep="true"
onloadcomplete=
"
jscall('document.body.removeChild(loadinginfo)');
set(events[loadtext].onloadcomplete,null);
"
/>
更進一步，如果我們想生成的每個漫遊都是這樣的啓動畫面，我們可以在krpano下載包的templates文件夾的html文件夾找到embedpano.html，然後將其內容改爲下面的內容。
<!DOCTYPE html>
<html>
<head>
<title>krpano - [NAME]</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
@-ms-viewport { width:device-width; }
@media only screen and (min-device-width:800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
</style>
</head>
<body>
<div id="loadinginfo" style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px;pointer-events:none;z-index:2;font-size:24px;font-weight:bold;"><br> 加載中...<br></div>
<script src="[JS]"></script>
<div id="pano" style="position:absolute;z-index:1;width:100%;height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
var krpano = null;
embedpano({swf:"[SWF]", xml:"[XML]", target:"pano", html5:"[HTML5]", mobilescale:1.0, passQueryParameters:true,onready:krpano_onready_callback});
function krpano_onready_callback(krpano_interface)
{
krpano = krpano_interface;
krpano.set("events[loadtext].keep", "true");
krpano.set("events[loadtext].onloadcomplete", "jscall('document.body.removeChild(loadinginfo)'); set(events[loadtext].onloadcomplete,null); ");
}
</script>
</div>
</body>
</html>
那麼我們使用droplet生成漫遊時，生成的tour.html自動具備了啓動畫面的功能。
