图片懒加载

vue语法实现图片懒加载

• 一般网上说的懒加载都是说给图片src指定一张小的空白图片，真实url放在自定义的属性中，在图片进入视口后替换src在加载图片
• 但在实际开发中，有时候会遇到图片不多，一屏放得下，但是由于图片有点大导致图片像是一条一条加载，在这里也适用于懒加载
• 懒加载肯定需要js动态更新src，但是vue直接src赋值为真实图片地址是显示不了的，需要先import一下，src直接等于import的值
• 将懒加载抽取为组件：

<template>
  <img ref="lazyImg" :src="showSrc" alt="">
</template>

<script>

export default {
  name: 'LazyImage',
  props: {
    smallImg: { // 小图
      type: String,
      default: ''
    },
    realImg: { // 大图
      type: String,
      default: ''
    },
    alwaysSmall: { // 控制是否替换小图，有的地方图片占位小，就不需要大图
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showSrc: '' // img绑定的src
    }
  },
  watch: {
    realImg: { // 监听大图地址，小图也一样
      immediate: true, // 是否立即监听，就是说页面初始化那一次也算，能使得不需要再到created()里面再调用一次，减少代码
      handler: function() { // 监听执行函数，只能使用function，不能箭头，箭头会拿不到this
        if (this.alwaysSmall) {
          this.showSrc = this.smallImg
        } else {
          this.updateImgSrc()
        }
      }
    }
  },
  methods: {
    // 在大图加载完成后更新图片src
    updateImgSrc() {
      this.showSrc = this.smallImg
      const img = new Image()
      img.src = this.realImg
      img.onload = () => {
        // 图片加载成功后的回调
        this.showSrc = this.realImg
      }
    }
  }

}
</script>

<style>

</style>

• 调用：

<lazyImg :small-img="url_s" :real-img="url" />
<lazyImg :small-img="url_s" :real-img="url" alwaysSmall />

• alwaysSmall 直接有就行可以不用赋值，有就代表ture