去评论
dz插件网

Vue实现图片预加载

镖师
2022/06/29 16:26:57
[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.   },
进入原文参与互动