·设为首页收藏本站📧邮箱修改🎁免费下载专区💎积分✅卡密📒收藏夹👽聊天室
🔄最新发布📃文档资料库🆔加群看共享切换到窄版
立即注册
DZ插件网»🏠首页 › Discuz!交流与探讨 › Discuz!运营教程 › 开发文档 › Vue实现图片预加载
返回列表 发布新帖

Vue实现图片预加载

199 0
发表于 2022-6-29 16:26:57 | 查看全部 阅读模式

马上注册，免费下载更多dz插件网资源。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
[JavaScript]  
  1. methods: {
  2.     preload: function() {
  3.       let imgs = [
  4.         "static/img/back.gif",
  5.         "static/img/correct.png",
  6.         "static/img/cover.gif",
  7.         "static/img/errExpress.png",
  8.         "static/img/error.png",
  9.         "static/img/ply.png",
  10.         "static/img/q1.png",
  11.         "static/img/q1a.png",
  12.         "static/img/q1b.png",
  13.         "static/img/q1c.png",
  14.         "static/img/q1d.png",
  15.         "static/img/share.png",
  16.         "static/img/start.png",
  17.         "static/img/stop.png"
  18.       ]
  20.       for (let img of imgs) {
  21.         let image = new Image()
  22.         image.src = img
  23.         image.onload = () => {
  24.           this.count++
  25.           // 计算图片加载的百分数，绑定到percent变量
  26.           let percentNum = Math.floor(this.count / 14 * 100)
  27.           this.percent = `${percentNum}%`
  28.         }
  29.       }
  30.     },
  32.   },
复制代码
实现, 图片, 加载, image, 计算
我要说一句 收起回复
赞赏
回复

使用道具 举报

相关帖子
返回列表 发布新帖

回复
 懒得打字嘛，点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

创宇盾启航版免费网站防御网站加速服务

关于我们

关于我们 免责声明 应用市场 下载中心

服务支持

有问必答 优秀站点 常见问题 建站必看
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载，复制和建立镜像，
如有违反，按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:3.15.218.44,GMT+8, 2024-12-23 09:15 , Processed in 0.293390 second(s), 76 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2024 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
 QQ客服返回顶部
快速回复 返回顶部 返回列表