zoukankan      html  css  js  c++  java
  • Vue实现图片预加载

    <script>
    export default {
    data () {
    return {
    count: 0,
    }
    },
    mounted: function() {
    this.preload()
    },
    methods: {
    preload: function() {
    let imgs = [
    "static/img/back.gif",
    "static/img/correct.png",
    "static/img/cover.gif",
    "static/img/errExpress.png",
    "static/img/error.png",
    "static/img/ply.png",
    "static/img/q1.png",
    "static/img/q1a.png",
    "static/img/q1b.png",
    "static/img/q1c.png",
    "static/img/q1d.png",
    "static/img/share.png",
    "static/img/start.png",
    "static/img/stop.png"
    ]

    for (let img of imgs) {
    let image = new Image()
    image.src = img
    image.onload = () => {
    this.count++
    }
    }

    },
    },
    }
    </script>

    加载百分比实现
    <template>
    <div class="page-container" style="text-align: center;">
    <div id="loading-panel">
    <h1><strong>Loading...</strong></h1>
    <h2><strong>{{percent}}</strong></h2>
    </div>
    </div>
    </template>

    <script>
    export default {
    data () {
    return {
    count: 0,
    percent: '',
    }
    },
    mounted: function() {
    this.preload()
    },
    methods: {
    preload: function() {
    let imgs = [
    "static/img/back.gif",
    "static/img/correct.png",
    "static/img/cover.gif",
    "static/img/errExpress.png",
    "static/img/error.png",
    "static/img/ply.png",
    "static/img/q1.png",
    "static/img/q1a.png",
    "static/img/q1b.png",
    "static/img/q1c.png",
    "static/img/q1d.png",
    "static/img/share.png",
    "static/img/start.png",
    "static/img/stop.png"
    ]

    for (let img of imgs) {
    let image = new Image()
    image.src = img
    image.onload = () => {
    this.count++
    // 计算图片加载的百分数,绑定到percent变量
    let percentNum = Math.floor(this.count / 14 * 100)
    this.percent = `${percentNum}%`
    }
    }
    },

    },

    watch: {
    count: function(val) {
    // console.log(val)
    if (val === 14) {
    // 图片加载完成后跳转页面
    this.$router.push({path: 'cover'})
    }
    }
    }
    }
    </script>

    https://www.jianshu.com/p/1618cb183d28

  • 相关阅读:
    【洛谷 P1896】[SCOI2005]互不侵犯(状压dp)
    【洛谷 P4289】[HAOI2008]移动玩具(搜索)
    【洛谷 SP283】NAPTIME
    【洛谷 P4342】[IOI1998]Polygon(DP)
    【洛谷 SP2878】Knights of the Round Table(双联通分量)
    【洛谷 P4168】[Violet]蒲公英(分块)
    【洛谷 P4180】【模板】严格次小生成树[BJWC2010](倍增)
    数学总结
    个人码风
    【洛谷 P3304】[SDOI2013]直径(树的直径)
  • 原文地址:https://www.cnblogs.com/shy1766IT/p/11247979.html
Copyright © 2011-2022 走看看