实现图片预加载功能

图片的加载速度往往影响着网站整体的用户体验，尤其对于包含大量图片的网站。
对图片进行预加载，不失为一个高效的解决方案。如何实现预加载？

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，
访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。
这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。

首先将需要加载的图片放置到一个数组中
 export default {
  data() {
    return {
      preloadImgs : [
        require('图片路径'),
        require('图片路径'),
        require('图片路径'),
     ],
      num: 0
    }
  },
  computed: {
    percent() {
      //计算图片加载的百分进度
      return parseInt((this.num / this.preloadImgs.length) * 100)
    }
  },
  mounted() {
    this.preload()
  },
  methods: {
    preload() {
      for (let i = 0; i < this.preloadImgs.length; i++) {
        const img = new Image()
        img.src = this.preloadImgs[i]
        img.onload = (e) => {
          this.num++
          this.loaded()
        }
        img.onerror = () => {
          this.num++
          this.loaded()
        }
      }
    },
    loaded() {
      if (this.num === this.preloadImgs.length) {
       //此时是所有图片加载完成的时候要做事情
      }
    }
  },

标签：功能,img,num,loaded,加载,preloadImgs,图片
来源： https://www.cnblogs.com/ccyq/p/14831415.html