Skip to content

html / zhufuyuCommon

Go to a project
Commit 36c2a58a by mamingqun
Options

添加预加载loading

parent d23b5664
Showing with 103 additions and 6 deletions
package.json
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
"html2canvas": "^1.0.0-rc.5", "html2canvas": "^1.0.0-rc.5",
"jquery": "^3.4.1", "jquery": "^3.4.1",
"mint-ui": "^2.2.13", "mint-ui": "^2.2.13",
"preloadjs": "^1.0.1",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-router": "^3.0.3", "vue-router": "^3.0.3",
"vuex": "^3.0.1" "vuex": "^3.0.1"
......
public/index.html
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>testnihao</title> <title>testnihao</title>
<!-- 微信sdk -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<!-- 预加载 -->
<script src="./libs/preloadjs.min.js"></script>
</head> </head>
<body> <body>
<noscript> <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' ...@@ -2,8 +2,9 @@ import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
// axios配置 // axios配置
import './utils/axiosConfig' // import './utils/axiosConfig'
// 微信授权登陆 // 微信授权登陆
import wxAuth from './utils/wxAuth' import wxAuth from './utils/wxAuth'
// 配置选项 // 配置选项
......
src/router.js
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Home from './views/Home.vue' 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 User from './views/User.vue'
import Detail from './views/Detail.vue' import Detail from './views/Detail.vue'
import Index from './views/Index.vue' import Index from './views/Index.vue'
......
src/views/Home.vue
<template> <template>
<div class="home"> <div class="home">
<h6>home页{{msg}}</h6> <h6>home页{{msg}}</h6>
<ul>
<li>
<button @click="testJump">跳转详情生成海报</button> <button @click="testJump">跳转详情生成海报</button>
</li>
<li>
<button @click="jumpToLoading">跳转loading预加载页面</button>
</li>
</ul>
<Music /> <Music />
<ossExample /> <ossExample />
</div> </div>
...@@ -20,14 +27,14 @@ export default { ...@@ -20,14 +27,14 @@ export default {
} }
}, },
mounted() { mounted() {
this.msg = process.env.NODE_ENV this.msg = process.env.NODE_ENV
}, },
methods: { methods: {
testJump() { testJump() {
this.$router.push({ path: 'detail', query: { detailId: 123456 } }) this.$router.push({ path: 'detail', query: { detailId: 123456 } })
},
jumpToLoading() {
this.$router.push({ path: 'loading' })
} }
}, },
components: { components: {
......
src/views/Loading.vue
<template> <template>
<div>loading页面</div> <div>
</div>
</template> </template>
<script> <script>
...@@ -8,3 +10,6 @@ export default { ...@@ -8,3 +10,6 @@ export default {
} }
</script> </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 ...@@ -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" source-map "^0.6.1"
supports-color "^6.1.0" 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: prelude-ls@~1.1.2:
version "1.1.2" version "1.1.2"
resolved "https://registry.npm.taobao.org/prelude-ls/download/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" 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