Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
Vue 实现 图片 页面 加载 打开 全部 3.2
2023-09-14 08:59:32 时间
一,js代码:
1,html代码
<div ref="loadingDiv" v-show="loadingShow" style="left:0;top:0;position:fixed;width:100vw;height:100vh;background: #000000;opacity: 0.7;z-index:65535;"> <div style="font-size:0.5rem;text-align:center;width:3rem;height:1rem;color:#ffffff;position:absolute;left:calc(50vw - 1.5rem);top:calc(50vh - 0.5rem);"> loading:{{loadingProcess}}% </div> </div>
2, js代码
//已加载完成的数量 const loadCount = ref(0); //执行下载所有图片 const loadImages = ()=> { let imgs = [ "static/image/xiaolanyuan.png", "static/ani/fzlc.png", "static/ani/ship.jpg", "static/image/slide6/27.jpg", "static/image/slide6/28.jpg", "static/image/slide6/29.jpg", "static/image/31.png", "static/image/32.png", "static/image/tzms.png", "static/image/ztjjjms.png", "static/image/dahongyuan.png", ] for (let img of imgs) { let image = new Image() image.src = img image.onload = () => { console.log("image.onload:length:"+imgs.length); console.log("image.onload:src:"+image.src); loadCount.value++ // 计算图片加载的百分数,绑定到percent变量 let percentNum = Math.floor(loadCount.value / imgs.length * 100) loadingProcess.value = percentNum; //判断是否结束 if (loadCount.value >= imgs.length) { //loading end console.log('end:'+loadingProcess.value); loadingShow.value = false; } } } }
调用:
onMounted(()=>{ loadImages(); }) //加载的百分比 const loadingProcess = ref("0"); //是否显示 const loadingShow = ref(true); return { loadingProcess, loadingShow, }
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,查看效果
三,查看vue的版本:
liuhongdi@lhdpc:/data/vue/guotou4$ npm list vue guotou4@0.1.0 /data/vue/guotou4 ├─┬ @vue/cli-plugin-babel@5.0.4 │ └─┬ @vue/babel-preset-app@5.0.4 │ └── vue@3.2.33 deduped ├─┬ @vueuse/core@8.4.2 │ ├─┬ @vueuse/shared@8.4.2 │ │ └── vue@3.2.33 deduped │ ├─┬ vue-demi@0.12.5 │ │ └── vue@3.2.33 deduped │ └── vue@3.2.33 deduped ├─┬ vue@3.2.33 │ └─┬ @vue/server-renderer@3.2.33 │ └── vue@3.2.33 deduped └─┬ vue3-count-to@1.1.2 └── vue@3.2.33 deduped
相关文章
- Vue-Cli优化编译速度
- Vue的引入与基本使用
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- Vue路由
- Vue+Node实现服务端渲染
- Vue–模板语法[通俗易懂]
- 使用开源Cesium+Vue实现倾斜摄影三维展示
- vuex的五大核心_vue如何实现跨域
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- vue-router 如何实现支持外部链接
- Springboot+Vue+shiro实现前后端分离、权限控制
- vue及原生html实现列表无缝上下滚动,以及单行滚动
- Vue全家桶介绍_vue全家桶有什么好处
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- 能不能手写Vue响应式?前端面试进阶_2023-02-27
- 带你详细了解AES算法《附带java、vue实现》
- IntelliJ IDEA使用 vue-cli 创建Vue项目
- 每日一题之Vue的异步更新实现原理是怎样的?5
- vue.js客服系统实时聊天项目开发(五)flex布局实现输入框区域
- vue 中使用 v-bind 与 v-on 来实现 v-model 双向绑定 ?
- 基于Vue+SSM+SpringCloudAlibaba的英雄管理系统
- 安装Vue on Linux:轻松搭建开发环境(linux安装vue)
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- Vue框架搭建在Redis之上的Web应用(vue请求redis)
- Vue快速连接Redis实现数据存储(vue 直连redis)
- 用Vue从Redis中获取强有力的数据(vue用redis中数据)
- Vue搭配Redis做针对性取值(vue redis取值)