使用HTML元素作为启动画面

文章目录

简述

首先可阅读移花接木(11)- 制作项目启动画面来了解关于krpano启动画面的内容,通常会在krpano代码内设计一个layer元素,且全屏覆盖在全景之上。当全景图加载完成或预览图加载完成时,则移除layer元素(让layer的visible为false,或者将其坐标位置设置到屏幕外)。

问题是,有时候加载krpano viewer文件(tour.js)以及分析krpano xml这个时间也比较长,导致该layer元素出现的时机较晚,没有起到应有的启动画面的作用。那么,我们可以在加载tour.js之前来加载启动画面,这样就避免了以上等待启动画面出现过长的情况。那么最简单的启动画面就是一个文字div,其出现的时间等同于加载html文件自身的时间。

 

代码

所有代码都是在tour.html中完成,无需涉及krpano的xml文件。下面高亮部分是关键代码。

  • 19行的div的id为loadtext,该div即为一个全屏黑屏,中间为白色文字“加载中……”。其z-index比下面pano的z- index要大。所以会在上面显示。
  • krpano变量是krpano全局接口。
  • embedpano中设置onready回调参数,以便在viewer加载完成后在krpano viewer中设置一个onloadcomplete事件。
  • 那么实际上我们在krpano_onready_callback所执行的

    等同于在tour.xml中写上

     

更进一步,如果我们想生成的每个漫游都是这样的启动画面,我们可以在krpano下载包的templates文件夹的html文件夹找到embedpano.html,然后将其内容改为下面的内容。

那么我们使用droplet生成漫游时,生成的tour.html自动具备了启动画面的功能。