基于Vue实现的图片懒加载组件

参数

属性集合
options: {
	width: 500,
	height: 500,
	margin: '20 auto 20',
	list: [
		image
	]
}

功能代码（可直接复制代码使用）

<template>
  <div class="lazy-load">
    <img v-for="(img, index) of list"
	     :key="index"	//这里不建议用下标作为标识，最好使用图片的Id号
	     :style="{width: `${width}px`, height: `${height}px`, margin: margin}"
	     alt="image"
	     src
	     :data-class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img" />
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  components: {},
  data() {
    return {};
  },
  computed: {
    width() {
      return this.options.width || 'auto';
    },
    height() {
      return this.options.height || 'auto';
    },
    margin() {
      let margin = this.options.margin || 'auto';
      let regex = /(\b\d+\b)/g;
      let str = margin.replace(regex, `$1px`);
      return str;
    },
    list() {
      return this.options.list || [];
    },
    cliceHeight() {
      let height = document.documentElement.clientHeight; // 可视区域的高度
      return height;
    }
  },
  watch: {},
  methods: {
    lazyload() {
      const domList = document.querySelectorAll('img');
      domList.forEach((item, index) => {
        let rest;
        if (!item.dataset.src) {
          return;
        }
        rest = item.getBoundingClientRect();
        if (rest.bottom >= 0 && rest.top < this.cliceHeight) {
          let img = new Image();
          img.src = item.dataset.src;
          img.onload = () => {
            item.src = img.src;
          };
          item.removeAttribute('data-src');
          item.removeAttribute('lazyload');
        }
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.lazyload();
      window.addEventListener('scroll', this.lazyload);
    });
  },
  created() {}
};
</script>

<style lang='scss' scoped>
.lazy-load {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>

用法示例

<lazy-load :options="options" />

介绍一个关于replace的高阶用法：

'20 auto 50'.replace(/(\b\d+\b)/g, '$1px');	// 20px auto 50px

如果需要用到源文本中的部分内容，我们可以将这部分内容的匹配规则用括号包起来，用$n来表示
不局限于只有1个，$1…$n。

我是底部
一个很基础的功能，发表一些文章是想要逐渐养成写博客的习惯，如果对你有帮助，那真是一件很棒的事，如果内容有什么问题或建议，欢迎在下方留言。😀 😀 😀