在Vue项目中加载krpano全景图
在Vue-cli项目中做krpano全景图编辑器的时候,由于js插件的路径是动态的,做的过程中遇到了加载不到资源的难题,在网上搜索了好久也没找到合适的办法,最后想到了可能是JS加载的问题,于是解决了问题,下面跟大家分享一下做法。
首先, 在vue的路由页面中加载动态的js插件,需要等待JS文件加载完成之后,才能使用JS插件中的方法来加载全景图:
// 加载动态JS文件
var _doc = document.getElementsByTagName('head')[0];
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', jsUrl); // jsUrl是JS文件的路径
_doc.appendChild(js);
// 下面是加载全景图, 针对不同浏览器做兼容
if (document.all) { //如果是IE
js.onreadystatechange = function () {
if (js.readyState == 'loaded' || js.readyState == 'complete') {
embedpano({ // js插件中的方法,用于加载全景图
swf: that.tourSwfUrl,
xml: that.tourXmlUrl,
target: "pano",
html5: "always",
mobilescale: 1.0,
passQueryParameters: true
});
that.krpano = document.getElementById("krpanoSWFObject");
}
}
}
else {
js.onload = function () {
embedpano({
swf: this.tourSwfUrl, // krpano全景图的swf文件路径
xml: this.tourXmlUrl, // krpano全景图的xml文件路径
target: "pano",
html5: "auto",
mobilescale: 1.0,
flash: 'auto',
passQueryParameters: true
});
this.krpano = document.getElementById("krpanoSWFObject") // 保存全景图对象
}
}
然后就是将全景图显示在页面上
<div id="pano"></div>
这样全景图就能顺利加载出来了,第一次做前端知识分享,有不妥之处欢迎留言,谢谢!
原文地址:https://segmentfault.com/a/1190000017292935
在Vue项目中加载krpano全景图的更多相关文章
- Web项目中加载Spring配置的常用方法
1.web.xml中添加配置 <web-app> <context-param> <param-name>contextConfigLoc ...
- vue-router中,require代替import解决vue项目首页加载时间过久的问题
vue的路由配置文件(routers.js),一般使用import引入的写法,当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加 ...
- vue项目未加载完成前显示loading...
1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> &l ...
- vue项目首次加载过慢
vue项目优化 浅谈 Vue 项目优化 关于vue在app首次加载缓慢的解决办法 nginx开启缓存 在http部分加入 #要想开启nginx的缓存功能,需要添加此处的两行内容! #设置Web缓存区名 ...
- vc项目中加载多个lib遇到的问题
一个VC项目中 在网络加密 json解析等方面 加载了多个第三方库和文件 boost cryptpp rapidjson mysql的连接池等等 在使用mysql++的时候 多次报错 LNK 20 ...
- vue-router路由懒加载(解决vue项目首次加载慢)
懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单 ...
- VUE页面实现加载外部HTML方法
前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的.所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件.需要搞点事情以达到想要的效果.本文主要和大家介绍VU ...
- vue中加载three.js的gltf模型
vue中加载three.js的gltf模型 一.开始引入three.js相关插件.首先利用淘宝镜像,操作命令为: cnpm install three //npm install three也行 二. ...
- Vue按需加载提升用户体验
Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...
随机推荐
- BZOJ 3622 Luogu P4859 已经没有什么好害怕的了 (容斥原理、DP)
题目链接 (Luogu) https://www.luogu.org/problem/P4859 (bzoj) https://www.lydsy.com/JudgeOnline/problem.ph ...
- Apicloud_(模板)登陆注册功能模板
项目已托管到Github上 传送门 不需要使用任何图片资源,需要用到SHA1.js库文件, Apicloud_(接口验证)用户注册头部信息X-APICloud-AppKey生成 传送门 项目全代码放到 ...
- 解决新建Maven项目webapp-- index.jsp报错
现在,随着项目开发的不断增长,项目变得庞大,jar包管理起来也很费时.使用maven工程可以很轻松的帮助我们管理jar包,省时. 今天,我在公司电脑新建的maven工程,新建完后 index.jsp报 ...
- C# 防火墙操作之启用与关闭
通过代码操作防火墙的方式有两种:一是代码操作修改注册表启用或关闭防火墙:二是直接操作防火墙对象来启用或关闭防火墙.不论哪一种方式,都需要使用管理员权限,所以操作前需要判断程序是否具有管理员权限. 1. ...
- leetcode 51 N皇后问题
代码,由全排列转化而来,加上剪枝,整洁的代码: 共有4个变量,res(最终的结果),level,当前合理的解,n皇后的个数,visit,当前列是否放过皇后,由于本来就是在新的行方皇后,又通过visit ...
- ATP检测 BAPI BAPI_MATERIAL_AVAILABILITY
*****ATP检测 DATA: END_RLT LIKE EBAN-LFDAT, NOT_AVAILABLE, AVAILABLE( ...
- Linux从一个服务器拷贝文件到另一个服务器上
***复制文件夹到另外一个服务器scp -r tmp root@114.215.80.12:/work/temp输入密码 scp -r customer root@114.215.80.12:/hom ...
- python学习之那些由print引起的困惑
该文索所起之因:在练习列表的操作时,要输出一波操作后的列表,但是一直让本人耿耿于怀的时下边的这个现象: 红色框框里是字符串,黄色框框里是列表,同样是只对一个元素进行的操作,为啥输出时字符串是作为一个整 ...
- P2814 家谱
我真没什么创意了woc.. so,为什么一道水题是蓝色的???哦哦哦,水好像就是蓝色的,emmm那就不是恶意评分了嘤嘤嘤 ... 好吧实际上可能是非c党对于字符串的处理需要进行编号和结构体,会麻烦一点 ...
- P2077 【红绿灯】
我tm真是想不出来还有什么好玩的东西了~~ 这题是一道纯模拟题,只需要用一个变量表示当前汽车行驶了多少分钟 不难发现,这个神奇的变量可以直接用m表示,还可以省去一个变量...(好像并没有什么卵用) 具 ...