文章目录

简述

首先可阅读移花接木（11）- 制作项目启动画面来了解关于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>

<!DOCTYPE html>

<html>

<head>

<title>krpano</title>

<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>

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要大。所以会在上面显示。同时position需要设置为absolute
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); ");

1 2	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); 
	"
/>

<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>