首页 > 其他分享 >图片懒加载

图片懒加载

时间:2022-09-29 20:23:51浏览次数:56  
标签:src img realImg 大图 加载 图片

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

标签:src,img,realImg,大图,加载,图片
From: https://www.cnblogs.com/jia-zq/p/16742911.html

相关文章