Skip to content

html / zhufuyuCommon

Go to a project
Commit 36c2a58a by mamingqun
Options

添加预加载loading

parent d23b5664
Showing with 113 additions and 16 deletions
package.json
......@@ -15,6 +15,7 @@
"html2canvas": "^1.0.0-rc.5",
"jquery": "^3.4.1",
"mint-ui": "^2.2.13",
"preloadjs": "^1.0.1",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
......
public/index.html
......@@ -6,7 +6,10 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>testnihao</title>
<!-- 微信sdk -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<!-- 预加载 -->
<script src="./libs/preloadjs.min.js"></script>
</head>
<body>
<noscript>
......
src/example/Loading.vue 0 → 100644
<template>
<div>
<h4>loading预加载示例</h4>
<button @click="startLoad">开始加载</button>
<h4>{{progress}}</h4>
</div>
</template>
<script>
// import '@/assets/lib/createjs-2015.11.26.min.js';
export default {
data() {
return {
progress: 0,
mainfest: [
{ src: require("../assets/img/img.jpg") },
// 音频
{ src: require("../assets/mp3/music.mp3"), id: 'loop' },
// 视频
// { src: require("../assets/video/锡伯舞.mp4"), id: 'myVideo' }
]
}
},
mounted() {
},
methods: {
initLoad() {
var self = this
// var mainfest = [
// { src: require("../assets/img/img.jpg") },
// // 音频
// { src: require("../assets/mp3/music.mp3"), id: 'loop' },
// // 视频
// { src: require("../assets/video/锡伯舞.mp4"), id: 'myVideo' }
// ];
var preload = {
// 预加载函数
startPreload: function () {
var preload = new createjs.LoadQueue(true);
//为preloaded添加整个队列变化时展示的进度事件
preload.addEventListener("progress", this.handleFileProgress);
//注意加载音频文件需要调用如下代码行
preload.installPlugin(createjs.SOUND);
//为preloaded添加当队列完成全部加载后触发事件
preload.addEventListener("complete", this.loadComplete);
//设置最大并发连接数 最大值为10
preload.setMaxConnections(1);
preload.loadManifest(self.mainfest);
},
// 当整个队列变化时展示的进度事件的处理函数
handleFileProgress: function (event) {
// $(".percent").text('loading...' + Math.ceil(event.loaded * 100) + "%");
console.log(event.loaded);
self.progress = Math.ceil(event.loaded * 100) + "%"
},
// 处理preload添加当队列完成全部加载后触发事件
loadComplete: function () {
// shuangjie.$pageLoad.addClass('hide').next().removeClass('hide')
}
}
preload.startPreload();
},
startLoad() {
this.initLoad()
}
}
}
</script>
<style lang="less" scoped>
</style>
src/main.js
......@@ -2,8 +2,9 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// axios配置
import './utils/axiosConfig'
// import './utils/axiosConfig'
// 微信授权登陆
import wxAuth from './utils/wxAuth'
// 配置选项
......
src/router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Loading from './views/Loading.vue'
import Loading from './example/Loading.vue'
import User from './views/User.vue'
import Detail from './views/Detail.vue'
import Index from './views/Index.vue'
......
src/views/Home.vue
<template>
<div class="home">
<h6>home页{{msg}}</h6>
<button @click="testJump">跳转详情生成海报</button>
<ul>
<li>
<button @click="testJump">跳转详情生成海报</button>
</li>
<li>
<button @click="jumpToLoading">跳转loading预加载页面</button>
</li>
</ul>
<Music />
<ossExample />
</div>
......@@ -20,14 +27,14 @@ export default {
}
},
mounted() {
this.msg = process.env.NODE_ENV
},
methods: {
testJump() {
this.$router.push({ path: 'detail', query: { detailId: 123456 } })
},
jumpToLoading() {
this.$router.push({ path: 'loading' })
}
},
components: {
......
src/views/Loading.vue
<template>
<div>loading页面</div>
</template>
<script>
export default {
}
</script>
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
yarn.lock
......@@ -6403,6 +6403,11 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.5
source-map "^0.6.1"
supports-color "^6.1.0"
preloadjs@^1.0.1:
version "1.0.1"
resolved "https://registry.npm.taobao.org/preloadjs/download/preloadjs-1.0.1.tgz#71d14e94a8c94b1f6def2b01891d6bcd7e788c5d"
integrity sha1-cdFOlKjJSx9t7ysBiR1rzX54jF0=
prelude-ls@~1.1.2:
version "1.1.2"
resolved "https://registry.npm.taobao.org/prelude-ls/download/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment